6

私が書いているコンポーネントctrlは、押されたかどうかによって動作を変える必要があります。

window.onkeydownイベントを使用していますがSimulate、React Test Utilsからに対してイベントをディスパッチできませんwindow。私も試しましwindow.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 17 }));たが、モカ/ノードは認識しませんKeyboardEvent。

React Test Utilswindow.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);
    });
});
4

2 に答える 2

1

リスナーを次のように設定した場合、window.addEventListener('keydown', myFunc)をテストするだけで済みmyFuncます。実際には、 が発生addEventListenerしたときに関数を呼び出すことをテストする必要はありませんkeydown。

(コールバックで作業を行うのではなく) 常にイベントを関数にバインドすることで、テストがより直接的になり (コードをテストしている)、イベント リスナーを使い終わったら削除することもできます。

于 2016-08-06T07:29:30.393 に答える