关于测试 document mousemove 事件问题

来源：7-6 整合两个页面的逻辑和交互— 首页和创建页

qq_下弦月_4

2019-04-01

老师好，在课程中学习到 document click事件的测试技巧

let eventMap = {}
document.addEventListener = jest.fn((event, cb) => {
  eventMap[event] = cb
})
eventMap.click({
  target: document,
})

我尝试测试 mousemove 事件

let eventMap = {}
document.addEventListener = jest.fn((event, cb) => {
  eventMap[event] = cb
})
eventMap.mousemove({
  clientX: 200,
  clientY: 200
})

提示 TypeError: eventMap.mousemove is not a function
mouseover也是这样

……^ _ ^

写回答

2回答

张轩

2019-04-02

已采纳

同学很好的发散性思维，我们首先想想为什么第一个 click 没有报错呢？我们使用 jest.fn 劫持了 document.addEventListener 事件，在我们的代码中

componentDidMount() {
    document.addEventListener('click', this.handleClick, false)
}

这个时候 eventMap 就多了 click 一项，这时候调用 eventMap.click就没有问题，但是 mouseover 和 mousemove 这两个事件在代码实现中没有被添加过，所以你直接调用就会报错。希望你明白了这个原理哈。

qq_下弦月_4

非常感谢！

2019-04-03

共1条回复

qq_下弦月_4

提问者

2019-04-03

哦，明白了，我在代码中使用的

document.onmousemove，而不是 document.addEventListener('mousemove', this.handleClick, false)

所以jest.fn()没有劫持到。

茅塞顿开啊哈哈

所以如果不改变组件代码的话，测试代码改成document.onmousemove = jest.fn() 也一样

React16组件化+测试+全流程实战在线账本项目

轻松上手，从设计图到上线，精通组件化思维和组件测试

713 学习 · 177 问题

查看课程

相似问题

根组件测试问题(变量访问.检测状态)

回答 1

根组件的集成测试

回答 1

点击事件测试问题

回答 1

关于enzyme测试包安装的问题

回答 2

刚学到5.5节，对单元测试提一个疑问？

回答 1

打开慕课网App查看更多内容