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

Question

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

The trigger method takes an optional options object. The properties in the options object are added to the Event.

Note that target cannot be added in the options object.

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

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

TypeError: Cannot set property type of [object Event] which has only a getter

  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'）调用 changeView。它们不是事件属性，您不会将它们作为选项传递。所以你的测试看起来像：

  it('add button click', () => {
        const mockFn = jest.fn()
        wrapper.setMethods({
            changeView: mockFn
        })
        wrapper.find(ElementUI.Button).trigger('click');
        wrapper.update();
        expect(mockFn).toBeCalledWith(-1,'edit');
   })

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

vue-test-utils how to use trigger's options

vuejs2

vue-test-utils