CODEWITHSUNDEEP
node.jsvue.jsunit-testingjestjsbabel-jest
Leonardo Figueroa
Leonardo Figueroa

Reputation: 61

wrapper.setValue() cannot be called on EL-INPUT

I'm trying call a Vue component for unit test with Jest, I want do it set value a input text field. this is my "file.vue"

<el-form-item label="Nombre" data-test="id-form">
              <el-input
                v-model="data.nombre"
                maxlength="45"
                @blur="v$.data.nombre.$touch()"
                data-test="nombre_caja"
              ></el-input>
              <div v-if="v$.data.nombre.$error" class="text-danger                  text-xs">
                <small
                  v-for="error in v$.data.nombre.$errors"
                  :key="error.index"
                  >{{ error.$message }}</small
                >
              </div>
 </el-form-item>

My test code is

 it('Set value',async()=> {
    const wrapper = shallowMount(ModalNuevaCaja)

    const input = wrapper.find('[data-test="nombre_caja"]')

    await input.setValue({nombre:'New value'})

    expect(input.element.value).toBe('New Value')

And the error message is:

wrapper.setValue() cannot be called on EL-INPUT

      26 |     const input = wrapper.find('[data-test="nombre_caja"]')
      27 |
    > 28 |    await input.setValue({nombre:'New value'})
         |                ^
      29 |
      30 |    expect(input.element.value).toBe('New value')
      31 |

I'm new doing this and would appreciate any advice. Thank!!

Upvotes: 4

Views: 2863

Answers (1)

thchp
thchp

Reputation: 2404

wrapper.find() returns a DOMWrapper. The setValue() implementation on the DOMWrapper only allows you to use it on input, textarea, 'select`, etc.

You should use findComponent() in order to retrieve a VUEWrapper, on which you can call setValue().

 it('Set value', async () => {
    const wrapper = shallowMount(ModalNuevaCaja)

    const input = wrapper.findComponent('[data-test="nombre_caja"]')

    await input.setValue('New value')

    expect(input.element.value).toBe('New Value')
})

Upvotes: 5

Related Questions