Как проверить keyup с помощью addEventListener

Question

Я хочу проверить 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()
    })

Answer 1

Вы имитируете событие 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()
})