如何使用 vue-test-utils 在单元测试期间触发 window 事件

Question

我已经添加了 'attachToDocument'，但我仍然无法在 window 上触发 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()
  })
})

Answer 2

如果有人需要回答：

这是对我有用的方法：

首先你需要用 defineProperty

注册 removeEventListener 全局模式

例如：

Object.defineProperty(window, 'removeEventListener', {
    value: jest.fn(),
})

我们写完测试后

  it('When beforeMounted is executed', async () => {

    await wrapper.destroy()
    expect(window.removeEventListener).toHaveBeenCalled()
    expect(window.removeEventListener).toHaveBeenCalledWith(
      'keyup',
      wrapper.vm.keyUp
   )
})

如何使用 vue-test-utils 在单元测试期间触发 window 事件

How to trigger a window event during unit testing using vue-test-utils

vue.js

jestjs

vue-test-utils