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

Posted 2023-02-22

【中文标题】如何使用 vue-test-utils 在单元测试期间触发窗口事件

【英文标题】：How to trigger a window event during unit testing using vue-test-utils

【发布时间】：2019-09-08 08:14:37

【问题描述】：

我已经添加了“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' 应该已经被调用了。

我在网上搜索了很长时间。但是没有用。请帮助或尝试给出一些想法如何实现这一点。

【参考方案1】：

如果有人需要回答这个问题：

这是对我有用的方法：

首先你需要用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
   )
)

【参考方案2】：

您在 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()
  )
)

【讨论】：

这基本上测试mounted() 是否有效。需要测试的是侦听器附加到window 对象，它在keyup 上被调用并在 beforeDestroy 上被删除。所以应该使用attachToDom。另一种选择是使用window 模拟，该测试套件具有addEventListener 和removeEventListener 作为jest.fn()s。