如何在使用 vue-test-utils 进行单元测试期间触发窗口事件

Question

我添加了“attachToDocument”，但我仍然无法在窗口上触发 keyup 事件。

我的依赖项的版本：

"@vue/test-utils": "^1.0.0-beta.29"

"vue": "2.5.18"

<template lang="pug">
div
  h1 123
</template>
<script>
export default {
  mounted() {
    window.addEventListener('keyup', this.handleKeyup)
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.handleKeyup)
  },
  methods: {
    handleKeyup() {}
  }
}
</script>

import { mount } from '@vue/test-utils'
import test from '@/views/test.vue'

describe('just test', () => {
  it('handle keyup', () => {
    const wrapper = mount(test, {
      attachToDocument: true
    })
    const handleKeyup = jest.fn()
    wrapper.setMethods({ handleKeyup })
    wrapper.trigger('keyup')
    expect(handleKeyup).toHaveBeenCalled()
  })
})

'handleKeyup' 应该被调用。

我在网上找了很久。但是没有用。请帮助或尝试提供一些想法如何实现这一目标。

Answer 1

您在mounted钩子中设置了事件侦听器，因此当您调用wrapper.setMethods事件侦听器时，已经使用原始空函数进行了设置。也wrapper.trigger将在 Vue 实例上调度事件，但您在window对象上设置了事件侦听器。尝试以下..

import { mount } from '@vue/test-utils'
import test from '@/views/test.vue'

describe('just test', () => {
  it('handle keyup', () => {
    const handleKeyup = jest.fn()
    const wrapper = mount(test, {
        methods: { handleKeyup }
    })
    window.dispatchEvent(new Event('keyup'))
    expect(handleKeyup).toHaveBeenCalled()
  })
})