CodexBloom - Programming Q&A Platform

Trouble testing a Vue 3 component with props validation and v-model using Vue Test Utils

👀 Views: 3 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-07
vue vue-test-utils testing JavaScript

I've looked through the documentation and I'm still confused about I'm working with issues while trying to test a Vue 3 component that utilizes props validation and the v-model directive. The component renders a text input and validates the input based on a prop, and also emits a model update event when the input changes. I want to ensure that both the prop validation and the emitted event work as expected. Here's a simplified version of my component: ```vue <template> <input :value="value" @input="updateValue($event.target.value)" /> </template> <script> export default { name: 'MyInput', props: { value: { type: String, required: true, validator: (val) => val.length <= 10, }, }, methods: { updateValue(value) { this.$emit('update:value', value); }, }, }; </script> ``` I've written a test using Vue Test Utils to check for prop validation and to simulate input changes, but I'm getting the following behavior: `behavior: Prop "value" with value "longer than ten characters" failed validation`. Here's my test: ```javascript import { mount } from '@vue/test-utils'; import MyInput from '@/components/MyInput.vue'; describe('MyInput.vue', () => { it('validates props and emits update on input', async () => { const wrapper = mount(MyInput, { props: { value: 'valid' }, }); await wrapper.setProps({ value: 'too long invalid value' }); // this line fails await wrapper.find('input').setValue('new value'); expect(wrapper.emitted('update:value')).toBeTruthy(); expect(wrapper.emitted('update:value')[0]).toEqual(['new value']); }); }); ``` It seems like the prop validation is preventing my test from running through the input change when I set an invalid prop value. I thought that Vue Test Utils would allow me to test the emitted events without failing on prop validation for the initial mount. I've also tried to use `wrapper.vm.$props.value` to bypass the behavior, but that didn't work. How can I structure my test to handle prop validation properly while still testing the emitted event when the input changes? I'm using Vue 3 and Vue Test Utils 2.x. My development environment is Ubuntu. Am I missing something obvious? For context: I'm using Javascript on Linux. Am I missing something obvious?