How to read input value about vue-test-utils HOT 13 CLOSED

Yes 🙂

const value = wrapper.find('input').element.value

find traverses DOM nodes and Vue instances. All Wrappers returned by find contain an element and a vnode property. Only Vue instance Wrappers contain a vm object.

from vue-test-utils.

To add to @eddyerburgh's comment, if using TypeScript you will need to cast the returned element as HTMLInputElement if getting type or compiler errors. This is because .element returns a generic HTMLElement object. So this code would be like the following:

const inputField: HTMLInputElement = wrapper.find('input').element as HTMLInputElement
const value = inputField.value

from vue-test-utils.

Why use find? wrapper.vm.$refs.emailField.currentValue

from vue-test-utils.

Yes 🙂

const value = wrapper.find('input').element.value

find traverses DOM nodes and Vue instances. All Wrappers returned by find contain an element and a vnode property. Only Vue instance Wrappers contain a vm object.

@eddyerburgh Has this stopped working along the way? I'm having no luck reading my input's value in a Jest test and wonder if I've hit upon a limitation of JSDom.

P.S. Your book, Testing Vue.js Applications has been very helpful getting me up to speed. (Hopefully, I didn't read so fast that retention suffered and caused me to ask a question you already answered in your book.)

from vue-test-utils.

What if you're using a custom form element, such as this where the actual HTML input field is somewhere inside the component?

<el-input ref="emailField" name="email" v-model="form.email"></el-input>

I have tried giving it a ref and accessing it via vm.find({ ref: 'emailField' }).data.currentValue or via name vm.find('[name=email]').text() (and various other combinations) but I can't ever get the value.

Preferably, I'd rather go "the DOM way" as the test is about seeing if the value is rendered, not if it's set in the component's data.

from vue-test-utils.

Good point @LinusBorg, that works. Thanks.

from vue-test-utils.

Yeah, it works :) Thanks!

from vue-test-utils.

find method returns wrapper. Could you check for: vm.find({ ref: 'emailField' }).vm.currentValue ?

from vue-test-utils.

That doesn't work. Also tried with .vnode.currentValue and .element.value all to no avail.

from vue-test-utils.

Yes slightly_smiling_face

const value = wrapper.find('input').element.value

find traverses DOM nodes and Vue instances. All Wrappers returned by find contain an element and a vnode property. Only Vue instance Wrappers contain a vm object.

@eddyerburgh Has this stopped working along the way? I'm having no luck reading my input's value in a Jest test and wonder if I've hit upon a limitation of JSDom.

P.S. Your book, Testing Vue.js Applications has been very helpful getting me up to speed. (Hopefully, I didn't read so fast that retention suffered and caused me to ask a question you already answered in your book.)

I have the same problem

from vue-test-utils.

Hi! Can you share a basic example of the scenario where you cannot access input's value?

from vue-test-utils.

Yes slightly_smiling_face

const value = wrapper.find('input').element.value

find traverses DOM nodes and Vue instances. All Wrappers returned by find contain an element and a vnode property. Only Vue instance Wrappers contain a vm object.

@eddyerburgh Has this stopped working along the way? I'm having no luck reading my input's value in a Jest test and wonder if I've hit upon a limitation of JSDom.
P.S. Your book, Testing Vue.js Applications has been very helpful getting me up to speed. (Hopefully, I didn't read so fast that retention suffered and caused me to ask a question you already answered in your book.)

I have the same problem

I am also having the same problem, can anyone tell me the solution around it?

from vue-test-utils.

To add to @eddyerburgh's comment, if using TypeScript you will need to cast the returned element as HTMLInputElement if getting type or compiler errors. This is because .element returns a generic HTMLElement object. So this code would be like the following:

const inputField: HTMLInputElement = wrapper.find('input').element as HTMLInputElement
const value = inputField.value

Thanks for the solution, it is working.

from vue-test-utils.