如何测试Vue自定义输入组件？基于Vue.js官方示例的测试方法咨询

Let's break down how to write solid unit tests for that custom input component you're referencing. First, let's anchor ourselves to the core requirements from Vue's docs—these are exactly what our tests need to validate:

若组件要支持v-model（2.2.0+版本可配置），需满足两个条件：接收value属性、触发携带新值的input事件。

We'll use Vue Test Utils (the standard tool for Vue 2 unit testing) for these examples.

1. Test that the component renders the initial value prop #

First, confirm the component correctly displays the initial value passed via the value prop. Adjust the input selector to match whatever element your custom component uses under the hood.

import { shallowMount } from '@vue/test-utils'
import CustomInput from '@/components/CustomInput.vue'

describe('CustomInput', () => {
  it('renders the initial value from the value prop', () => {
    const initialValue = 'Hello World'
    const wrapper = shallowMount(CustomInput, {
      propsData: {
        value: initialValue
      }
    })

    const inputElement = wrapper.find('input')
    expect(inputElement.element.value).toBe(initialValue)
  })
})

2. Test that the component emits an input event with the new value on user input #

This is the critical piece for v-model functionality. We need to verify that when the user interacts with the input, the component emits the input event with the updated value.

it('emits input event with new value when input is updated', async () => {
  const wrapper = shallowMount(CustomInput, {
    propsData: {
      value: 'Initial'
    }
  })
  const inputElement = wrapper.find('input')
  const newValue = 'Updated Value'

  // Simulate user typing into the input
  await inputElement.setValue(newValue)

  // Check that the input event was triggered with the correct value
  expect(wrapper.emitted('input')).toBeTruthy()
  expect(wrapper.emitted('input')[0][0]).toBe(newValue)
})

3. Test that the component updates when the value prop changes #

If the parent component updates the value prop, our custom input should reflect that change immediately. This ensures two-way binding works correctly from parent to child.

it('updates displayed value when value prop changes', async () => {
  const wrapper = shallowMount(CustomInput, {
    propsData: {
      value: 'First Value'
    }
  })
  const inputElement = wrapper.find('input')
  expect(inputElement.element.value).toBe('First Value')

  // Update the value prop from the parent
  await wrapper.setProps({ value: 'Second Value' })

  // Verify the input displays the new value
  expect(inputElement.element.value).toBe('Second Value')
})

Bonus: Cover edge cases #

Don't forget to test scenarios that matter for your component's use case—like empty values, special characters, or max-length limits:

it('handles empty value correctly', async () => {
  const wrapper = shallowMount(CustomInput, {
    propsData: {
      value: ''
    }
  })
  const inputElement = wrapper.find('input')
  expect(inputElement.element.value).toBe('')

  await inputElement.setValue('')
  expect(wrapper.emitted('input')[0][0]).toBe('')
})

All these tests together validate that your custom input fully complies with Vue's v-model rules, ensuring it works reliably in parent forms and across different user interactions.

内容的提问来源于stack exchange，提问作者Jason Desrosiers