如何使用 vue-test-utils 在 <el-button> 上触发天气点击事件？答案

【问题标题】：How to test weather click event is triggered on the <el-button> with vue-test-utils?如何使用 vue-test-utils 在 <el-button> 上触发天气点击事件？
【发布时间】：2019-10-06 10:16:11
【问题描述】：

我正在用vue cli3 和element-ui 编写一个项目，并且我想为我的.vue 文件和.js 文件添加单元测试。我在<el-button>上绑定了一个点击事件openDialog，所以我想测试一下这个点击函数是否被调用。但我不擅长vue-test-unit，所以我尝试的所有方法都失败了。

这是我的代码：

<el-button
   type="mk-primary"
   icon="el-icon-coordinate"
   size="small"
   @click="openDialog"
   >filte</el-button>

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Orders from '@/views/orders/index.vue'
import ElementUI from 'element-ui'

const localVue = createLocalVue()
localVue.use(ElementUI)

describe('Orders.vue', () => {
  it('button click', () => {
    const wrapper = shallowMount(Orders, {
      localVue
    })
    const mockFn = jest.fn()
    const elButton = wrapper.find({ name: 'ElButton' })
    wrapper.setMethods({
      openDialog: mockFn
    })
    // wrapper.vm.$on('openDialog', mockFn)
    elButton.trigger('click')
    expect(mockFn).toBeCalled()
    expect(wrapper.find(elButton).exists()).toBe(true)
  })
})

提前致谢。

【问题讨论】：

标签： vue-test-utils element-ui

【解决方案1】：

当您触发按钮点击时，您需要等待nextTick() 才能断言任何内容。

您应该将您的测试函数设为async，然后您可以在button.trigger() 上使用await。请参阅Vue-test-utils docs 中的示例。

对于你不能await 的事情，你可以明确地await Vue.nextTick() 或wrapper.vm.$nextTick()

【讨论】：