Question

我正在使用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");
});

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

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

由于

Answer 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的属性，并强制更新模型。

Answer 2

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

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

使用Jest（Vue）测试子组件的输入字段

2 个答案: