Reactjs中的测试窗口keydown事件

Question

我写的组件需要根据是否ctrl按下来改变其行为.

我使用了一个window.onkeydown事件,但是Simulate来自React Test Utils不允许我发送事件window.我也试过window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 17 }));但是mocha/node无法识别KeyboardEvent.

有没有办法window.onkeydown使用React Test Utils进行测试？如果没有,有没有更好的方法在mocha中为节点做？

以下是一些说明问题的代码:

describe('On Keydown', () => {
    it('fires the event', () => {
        // Component
        const Component = class extends React.Component {
            constructor(props) {
                super(props);
                this.state = { key: false };
                window.addEventListener('keydown', e => this.setState({ key: true }));
                window.addEventListener('keyup', e => this.setState({ key: false }));
            }
            render() {
                return <span>test</span>
            };
        };
        // Rendering
        const rendered = renderIntoDocument(<Component/>);
        // Firing event
        expect(rendered.state.key).to.equal(false);
        // Error here
        Simulate.keyDown(window, { keyCode: 17 });
        expect(rendered.state.key).to.equal(true);
    });
});

Answer 1

如果您像这样设置侦听器，window.addEventListener('keydown', myFunc)则只需要 test myFunc，实际上不需要测试发生addEventListener时调用您的函数keydown。

通过始终将事件绑定到函数（而不是在回调中进行工作），测试会更加直接（您正在测试代码），并且在完成事件侦听器后，您还可以删除它们。