Question

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

我的依赖项版本：

“ @ 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()
  })
})

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

1 个答案: