Vue Test Utils：如何在事件处理器中传入输入框值？

方法1：直接触发子组件的input事件并传值 #

由于你的CustomInput组件在浏览器中会将输入值作为input事件的参数传递给父组件，测试时可以直接调用子组件的$emit方法传入测试值，让父组件的myFunction收到正确的字符串：

describe('QbtSearchBox', () => {
  test('myTest', async () => {
    const testSubject = mount(MyComponent, {
      store, localVue,
    })
    const quoteNumberInput = testSubject.find('#quote-input')
    
    // 直接触发组件的input事件并传入测试值
    await quoteNumberInput.vm.$emit('input', '1234567.2')
    await testSubject.vm.$nextTick()

    expect(myActions.myVuexAction).toHaveBeenCalled()
  })
})

方法2：模拟真实用户输入（贴近浏览器行为） #

如果想模拟真实用户输入流程，需要定位到CustomInput内部的原生<input>元素，修改其值后触发原生input事件，这样CustomInput会像浏览器中一样处理事件并传递正确的值给父组件：

describe('QbtSearchBox', () => {
  test('myTest', async () => {
    const testSubject = mount(MyComponent, {
      store, localVue,
    })
    // 找到CustomInput内部的原生input元素
    const nativeInput = testSubject.find('#quote-input input')
    
    nativeInput.element.value = '1234567.2'
    // 触发原生input事件，组件会自动处理并传递正确参数
    await nativeInput.trigger('input')
    await testSubject.vm.$nextTick()

    expect(myActions.myVuexAction).toHaveBeenCalled()
  })
})

问题根源说明 #

你之前直接修改CustomInput组件根元素的value并触发事件，而组件根元素并非原生输入框，且trigger('input')默认传递的是Event对象，和浏览器中组件传递字符串的行为不一致，导致value.trim()报错。修改myFunction适配测试的做法会破坏浏览器端的正常逻辑，不可取。

内容的提问来源于stack exchange，提问作者Mark Scheer