当我想用 jest 测试我的 nuxt js 项目时，附加事件没有触发

Question

我正在使用 nuxt js + jest 构建一个 Web 应用程序

我的nuxt js组件代码：

export default {
  mounted () {
    document.addEventListener('click', this.eventClick)
  },
  destroyed () {
    document.removeEventListener('click', this.eventClick)
  },
  methods: {
    eventClick () {
      console.log('click event triggered!')
    }
  }
}

我开玩笑的代码：

import Dashboard from '~/pages/admin/dashboard'

test('test click', () => {
    wrapper = mount(Dashboard)

    wrapper.trigger('click')
})

问题是： jest 无法触发 click 事件并且代码 console.log('click event triggered!') 未执行。我该如何解决这个问题？

Answer 1

事件侦听器在 document 上，因此单击 wrapper 不会触发 click 事件。

而是在 document.body 上触发事件：

test('test click', () => {
  const eventClick = jest.spyOn(Dashboard.options?.methods || Dashboard.methods, 'eventClick')
  shallowMount(Dashboard)

  document.body.click() 

  expect(eventClick).toHaveBeenCalled()
})

demo

当我想用 jest 测试我的 nuxt js 项目时，附加事件没有触发

Attached Event is not firing when I want to test my nuxt js project with jest

vue.js

jestjs

vuejs2

nuxt.js