使用 Jest (Vue) 测试子组件的输入字段答案

【问题标题】：Testing Child Component's input field with Jest (Vue)使用 Jest (Vue) 测试子组件的输入字段
【发布时间】：2018-02-23 15:57:38
【问题描述】：

我正在用 jest 为我的 vue 应用程序实现单元测试用例

我有一种情况需要在子组件中测试输入字段。

<parent-component>
    <child-component>
       <input type="text" v-model="inputValue" />
    </child-component>
</parent-component>

我的测试如下所示

it('check empty validation', () => {
   const wrapper = mount(parentComponent, {
            propsData: {
             test:test
            }
   });
   wrapper.find(childComponent).vm.inputValue = "";
   expect(wrapper.vm.errorMessage).toBe("cannot be empty");
});

但设置模型似乎不起作用。

如何为文本框设置值并进行测试是我的问题

谢谢

【问题讨论】：

标签： vuejs2 jestjs

【解决方案1】：

您可以在元素上使用 Vue Test Utils setValue 方法：

it('check empty validation', () => {
  const wrapper = mount(parentComponent, {
    propsData: {
      test: test
    }
  })

  wrapper.find('input').setValue('')

  expect(wrapper.vm.errorMessage).toBe('cannot be empty')
})

这会设置元素value 属性并强制模型更新。

【讨论】：

【解决方案2】：

尝试使用 vue-test-utils 中的 setData：

https://vue-test-utils.vuejs.org/api/wrapper/#setdata-data

【讨论】：