Question

我想测试el-button是否可以通过$router更改为正确的视图，但是我对trigger支持的原因感到困惑，因为我在其文档中找到了这个问题

trigger方法采用一个optional选项对象。中的属性   选项对象将添加到事件中。

请注意，无法在options对象中添加目标。

const wrapper = mount(MyButton)
wrapper.trigger('click', { 
    button: 0
})

但是失败了，我得到了这个信息

TypeError：无法设置仅包含一个[对象事件]的属性类型吸气剂

  65 |     // expect(mockFn).toBeCalled
  66 |     // expect(mockFn).toBeCalledTimes(1)
  67 |     wrapper.find(ElementUI.Button).trigger('click', {
     |                                    ^
  68 |       id: 1,
  69 |       type: 'view'
  70 |     })

vue文件

<el-button
    plain
    type="primary"
    @click="changeView(-1, 'edit')">
    newPicture
</el-button>

js

changeView(id, type) {
    if (type === 'view') {
       this.$router.push({ path: './detail', query: { id, type }})
     } else if (type === 'edit') {
       this.$router.push({ path: './edit', query: { id, type }})
     }
},

我想为此按钮编写一个测试文件

   ...
    it('add button click', () => {
        const mockFn = jest.fn()
        wrapper.setMethods({
            changeView: mockFn
        })
        wrapper.find(ElementUI.Button).trigger('click', {
            id: 1,
            type: 'view'
        })
        wrapper.update()
        expect(mockFn).toBeCalled
        console.log(wrapper.vm.$route.path)
   })
  ...

我该如何解决？

Answer 1

您传递的选项是js $ event属性。以下是它们的列表：https://www.w3schools.com/jsref/obj_event.asp

当您触发该单击事件时，将使用传递给它的参数（-1和'edit'）调用php --ini。它们不是事件属性，您不能将它们作为选项传递。所以您的测试应该是这样的：

changeView

vue-test-utils如何使用触发器的选项

1 个答案: