javascript - 在 Reactjs 中测试窗口按键事件

Question

我正在编写的组件需要根据是否按下 ctrl 来更改其行为。

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

有没有办法使用 React Test Utils 测试 window.onkeydown？如果没有，有没有更好的方法在节点的摩卡中做到这一点？

下面是一些代码来说明这个问题:

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) 这样设置你的监听器，那么你只需要测试 myFunc，你实际上不需要测试addEventListener 会在 keydown 发生时调用您的函数。

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