Question

我正在用vue cli3和element-ui编写一个项目，并且我想为我的.vue文件和.js文件添加单元测试。我在openDialog上绑定了一个点击事件<el-button>，所以我想测试是否单击此点击函数。但是我不擅长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)
  })
})

先谢谢了。

Answer 1

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

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

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

如何通过vue-test-utils在<el-button>上触发天气单击事件的测试？

1 个答案: