Troubleshooting: Issues with updating a text field in Vue test utils using Jest

Question

Troubleshooting: Issues with updating a text field in Vue test utils using Jest

Hello, I am new to Jest and unit testing. I have a question about how to set the value of a text input using Vue Test Utils.

Here is the code for my custom text input component:

<input
    v-model="local_value"
    @keyup.enter="submitToParent"
    :class="input_class"
    :id="id"
    :disabled="is_disabled"
    :maxlength="max_length"
    :placeholder="placeholder"
    :autocomplete="(is_autocomplete) ? 'on' : 'off'"
    :name="id"
    :ref="id"
  />

Here is the test code I have written:

it("typing on the field should update the value correctly", async () => {
        const wrapper = shallowMount(TextInput, {
            propsData: {
                id: "my_input",
            }
        })

        // Find the component (which works properly), then try to insert some text
        const input = wrapper.findComponent({ref: "my_input"})
        input.element.value = "sample text"
        input.setValue("sample text")

        // The value still remains an empty string (""). Not sure what's going wrong.
        console.log(wrapper.vm.local_value)
        expect(wrapper.vm.local_value).toBe("sample text")

If you have any solutions to this problem, please let me know. Thank you for your time.

javascript vue.js unit-testing jestjs vue-test-utils

Answer 1

Answer №1

In my understanding, the setValue function operates asynchronously, which means you may have to use

await input.setValue('sample text')

to ensure proper execution.

Answer 2

In my understanding, the setValue function operates asynchronously, which means you may have to use

await input.setValue('sample text')

to ensure proper execution.

Answer 3

Answer №2

When setting the value of vm's local_value, be sure to do it this way:

const wrapper = shallowMount(TextInput)
await wrapper.setData({
   local_value: 'sample text'
})

If local_value is declared in data(), or:

const wrapper = shallowMount(TextInput)
await wrapper.setProps({
   local_value: 'sample text'
})

If local_value is declared in props() within your component.

Afterward, verify it with:

expect(wrapper.vm.local_value).toBe('sample text')

Note that this only checks the vm value, not the rendered value on the DOM.

To include testing the rendered value, you need to first declare the property value in your component for testing purposes:

<input
    v-model="local_value"
    // ... rest of the properties
    :value="local_value"
/>

Then test it using:

const input = await wrapper.findComponent({ ref: "my_input" })
expect(input.attributes('value').toBe('sample text')

An ideal test scenario would resemble:

it('should have input value' async () => {
  const wrapper = shallowMount(TextInput)
  await wrapper.setProps({  local_value: 'sample text' })
  
  const input = await wrapper.findComponent({ ref: 'my_input' })
  expect(wrapper.vm.local_value).toBe('sample text')
  expect(input.attributes('value').toBe('sample text')
})

👍 Quick tip:

To check the rendered input attributes, comment out all expect statements and insert:

expect(input.attributes('').toBe('random chars here to force an error')

The console will then display errors with the expected attribute output.

Answer 4

When setting the value of vm's local_value, be sure to do it this way:

const wrapper = shallowMount(TextInput)
await wrapper.setData({
   local_value: 'sample text'
})

If local_value is declared in data(), or:

const wrapper = shallowMount(TextInput)
await wrapper.setProps({
   local_value: 'sample text'
})

If local_value is declared in props() within your component.

Afterward, verify it with:

expect(wrapper.vm.local_value).toBe('sample text')

Note that this only checks the vm value, not the rendered value on the DOM.

To include testing the rendered value, you need to first declare the property value in your component for testing purposes:

<input
    v-model="local_value"
    // ... rest of the properties
    :value="local_value"
/>

Then test it using:

const input = await wrapper.findComponent({ ref: "my_input" })
expect(input.attributes('value').toBe('sample text')

An ideal test scenario would resemble:

it('should have input value' async () => {
  const wrapper = shallowMount(TextInput)
  await wrapper.setProps({  local_value: 'sample text' })
  
  const input = await wrapper.findComponent({ ref: 'my_input' })
  expect(wrapper.vm.local_value).toBe('sample text')
  expect(input.attributes('value').toBe('sample text')
})

👍 Quick tip:

To check the rendered input attributes, comment out all expect statements and insert:

expect(input.attributes('').toBe('random chars here to force an error')

The console will then display errors with the expected attribute output.

Troubleshooting: Issues with updating a text field in Vue test utils using Jest

Answer №1

Answer №2

Similar questions

Ways to segregate Vue functionality within a Laravel application using distinct layout and page templates

Setting the default selected row to the first row in ag-Grid (Angular)

Developing middleware for managing event handlers

Trouble with integrating HTML5 canvas from an external JavaScript file

Displaying an HTML button above JavaScript code

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

Signing off from GitHub Packages for npm

Struggling with retrieving data from a file in Angular service while using node-webkit. Unable to make it functional

Using JSON parsing to extract an integer as the key in JavaScript

When the remove button is pressed, I want the checkbox to become unchecked

What are some strategies for incorporating emotional themes into unit tests?

Formik Alert: Update depth limit reached

Tips for incorporating a live URL using Fetch

Vue router is unable to verify the user's authentication

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Error: JSON input ended unexpectedly and was not caught in the promise block

Passing slots to child components within a VueJS application - A helpful guide

Resetting md-radio-button choices within an Angular 2 application

Trouble with passing data from action to reducer in Redux with React Native

Issue with AdminLite 2.4.0 data table functionality malfunctioning