web-dev-qa-db-ja.com

反応コンポーネントのテストのためにウィンドウサイズの変更を模擬する方法を理解する

基本的に、コンポーネントがマウントされると、イベントリスナがサイズ変更イベントをリッスンします。 isMobileView状態を切り替えてから、小道具として子に渡します。したがって、これが機能し、テストされることが不可欠です。私はテストにかなり慣れていないので、ウィンドウのサイズを変更し、すべてのロジックを実行し、それがどのように実行されるかをテストするテストを作成する方法を見つけようとしています。

コードは次のとおりです-

componentDidMount() {
    this.setMobileViewState()
    window.addEventListener('resize', this.setMobileViewState.bind(this));
}

setMobileViewState() {
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) {
        this.setState({ isMobileView: true })
    } else {
        this.setState({ isMobileView: false })
    }
}

コードが機能することは知っていますが、テストを書きたいと思います。基本的には、状態が正しく変更されることを確認するものです。

javascriptreactjsunit-testingjestjsenzyme
17
joe

JestとEnzymeを使用すると、次のことができます。 JestにはJSDOMが組み込まれています。テストでは、Jestはwindowオブジェクトを提供し、globalで表されます（デフォルトのwindow.innerWidth Jestによって設定された1024px）：

test('Test something when the viewport changes.', () => {

    // Mount the component to test.
    const component = mount(<ComponentToTest/>);

    ...

    // Change the viewport to 500px.
    global.innerWidth = 500;

    // Trigger the window resize event.
    global.dispatchEvent(new Event('resize'));

    ...

    // Run your assertion.
});
26
JoeTidee

TypeScriptエラーメッセージが表示される場合

読み取り専用プロパティであるため、「innerWidth」に割り当てることができません。

試してください：

Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 200})
7
Lauren Madigan

この行は私にとって最も効果的でした。

window = Object.assign(window, { innerWidth: 500 });
1
Lital Levy