时间戳

首页 > 解决方案 > vue-test-utils 如何使用触发器的选项

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

问题描述

我想测试el-button它是否可以更改为正确的视图$router，但我很困惑天气支持的trigger原因我在它的文档中找到了这个

该trigger方法接受一个optional选项对象。选项对象中的属性被添加到事件中。

请注意，目标不能添加到options对象中。

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

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

TypeError：无法设置只有 getter 的 [object Event] 的属性类型

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

文件

<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)
   })
  ...

我怎样才能解决这个问题？

标签： vuejs2vue-test-utils

解决方案

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

当您触发该点击事件时，changeView将调用您传递给它的参数（-1 和“编辑”）。它们不是事件属性，您不会将它们作为选项传递。所以你的测试看起来像：

  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');
   })

推荐阅读