Vue-test-utils: How to read input value

[lusarz]

I want to read input value in my tests. I can do it easily with querySelector:
const value = wrapper.vm.$el.querySelector('input').value

but I would like to use wrapper method, something like:
const value = wrapper.find('input').getInputValue()

Is it possible with current wrapper API ?

[eddyerburgh]

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.

[lusarz]

Yeah, it works :) Thanks!

[chlab]

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.

[lusarz]

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

[chlab]

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

[LinusBorg]

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

[chlab]

Good point @LinusBorg, that works. Thanks.

[OzzyTheGiant]

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

[ProfessorTom]

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.)

[Bogdan808]

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

[afontcu]

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