代码之家 › 专栏 › 技术社区 › Marty

如何使用AddEventListener测试keyup

enzyme jestjs

Marty · 技术社区 · 6 年前

我想测试一下 handleKeyPress 方法,但当我模拟keyup时,出现以下错误: Expected spy to have been called, but it was not called.

//App.js

    componentDidMount() {
        document.addEventListener('keyup', this.handleKeyPress)
    }
    
    handleKeyPress = (event) => {
        if (event.keyCode === 38) {
            this.setState({
                up: true
            })
        }
    }
    
    
//App.test.js
    
    it('check handleKeyPress with keyup', ()=>{
        let instance = wrapper.instance()
        let handleKeyPress = spyOn(instance, 'handleKeyPress')
        wrapper.simulate('keyup', {keyCode: 38})
        expect(handleKeyPress).toHaveBeenCalled()
    })

1 回复 | 直到 6 年前

Heather Roberts 6 年前

您正在组件包装器上模拟keyup事件,但将keyup事件侦听器添加到文档对象。这个 Common Gothcas 部分提到了一些关于事件传播的事情,这些事情并没有如您所期望的那样工作。

我唯一能想到的办法就是监视 document.addEventListener 并手动调用测试文件中的处理程序。

it('check handleKeyPress with keyup', () => {

    // save keyup event handler added to document
    let keyUpHandler;
    document.addEventListener = jest.fn((event, handler) => {
        if (event === 'keyup') {
          keyUpHandler = handler;
        }
    });

    // render component
    wrapper = shallow(...); 
    let instance = wrapper.instance()
    let handleKeyPress = jest.spyOn(instance, 'handleKeyPress')

    // call the keyup handler with the event data
    keyUpHandler({ keyCode: 38 })
    expect(handleKeyPress).toHaveBeenCalled()
})

推荐文章

Albert Olivé Corbella · 如何使用渲染道具使用Jest正确模拟React组件

7 年前

blankface · 检查Jest中我的组件上是否存在可选道具

7 年前

Leff · 测试react组件的子级数

7 年前

softshipper · 如何基于物料ui测试组件?

7 年前

Liutong Chen · 编写酶测试时何时使用“Component.WrappedComponent”

7 年前

The Walrus · 检查初始函数promise中promise后的状态

7 年前

Lennert Hofman · 如何在酶中等待来自私人功能的承诺?

7 年前

Yuriy · 将全局包与TypeScript一起使用的正确方法是什么?

7 年前

Atul kumar singh · 创建React应用程序,由于1个错误,所有测试用例都失败

7 年前

Riley Bracken · 未运行Jest/酶映像onload回调

7 年前