Jest＆Enzymeを使用したReact/Reduxアプリのテスト-パート4：Reduxレデューサーのテスト

投稿日: 2022-04-20 2022-10-08
タグ: React

これは、堅牢なテストソリューションのためにJestとEnzymeの両方を使用してReact/Reduxアプリをテストする4部構成のシリーズのパート4です。このパートでは、Reduxレデューサーをテストする方法に関するいくつかの簡単な例を取り上げます。

シリーズ

パート1 ：インストールとセットアップ
パート2：Reactコンポーネントのテスト
パート3：Reduxアクションのテスト
パート4：Reduxレデューサーのテスト（この投稿）

Reduxのテストを続けて、レデューサーをテストする方法を示して、このシリーズを終了します。レデューサーは、React/Reduxアプリケーションのレンダリングチェーンを完成させるものです。アクションが実行されると状態が更新され、ReactがUIを再レンダリングします。

やってみましょう！

テストスイートをセットアップする

最初にすることはすることです import テストするレデューサーとアクションタイプ。また、先に進んで、 describe() このレデューサーのテストスイートをカプセル化するためのブロック。

アクションタイプファイルは、各アクションの文字列値にマップする定数をエクスポートします。

__tests __ / reducers / select_reducer.test.js

// Reducer to be tested
import selectReducer from '../../reducers/select_reducer';
import {
  SELECT_AVATAR, // Only ones related to the reducer being tested
} from '../../actions/types';

describe('select_reducer', () => {
  // ...
});

上記のコードを見てください。アクションのテストに使用したセットアップコードからいくつかの欠落に気付くかもしれません。私たちは店をあざけりませんでした。つまり、私たちはする必要はありません import the redux-mock-store パッケージ。また、実行する必要はありません clearActions() 各テストの前に。これは、レデューサーを直接呼び出した後、レデューサーから返された結果をテストするためです。私たちはしません dispatch() アクションで行ったように、それらをストアに入れます。

レデューサーをテストする

まず、初期状態をテストしてみましょう。これを行うには、ダミーアクションをレデューサーに渡します。私は switch デフォルトのレデューサーのステートメント case. アクションタイプがレデューサーによって認識されない場合、現在の変更されていない状態を返します。それ以外の場合は、変更された状態を返します。したがって、ダミーアクションを渡すことで、initialStateをテストできます（このテストを最初に実行するため）。

__tests __ / reducers / select_reducer.test.js


// ...

describe('INITIAL_STATE', () => {
  test('is correct', () => {
    const action = { type: 'dummy_action' };
    const initialState = { selectedAvatar: 0 };

    expect(selectReducer(undefined, action)).toEqual(initialState);
  });
});

// ...

次に、認識されたアクションとペイロードが渡されたときに、レデューサーが期待どおりに状態を変更することをテストしましょう。

__tests __ / reducers / select_reducer.test.js


// ...

describe('SELECT_AVATAR', () => {
  test('returns the correct state', () => {
    const action = { type: SELECT_AVATAR, payload: 1 };
    const expectedState = { selectedAvatar: 1 };

    expect(selectReducer(undefined, action)).toEqual(expectedState);
  });
});

// ...

スナップショット

アクションやコンポーネントの場合と同様に、テストに合格したら、スナップショットを活用して、数行のコードを切り取ることができます。

__tests __ / reducers / select_reducer.test.js


// ...

describe('INITIAL_STATE', () => {
  test('is correct', () => {
    const action = { type: 'dummy_action' };

    expect(selectReducer(undefined, action)).toMatchSnapshot();
  });
});

describe('SELECT_AVATAR', () => {
  test('returns the correct state', () => {
    const action = { type: SELECT_AVATAR, payload: 1 };

    expect(selectReducer(undefined, action)).toMatchSnapshot();
  });
});

// ...

ボーナスのヒント！

可能な限り、レデューサーを同様の機能にグループ化します。私たち selectReducers 使用したファイル SELECT_AVATAR アクションタイプですが、次のような追加のアクションが簡単に存在する可能性があります SELECT_USER, SELECT_THEME、などを同じレデューサーで実行します。それらをグループ化することで、アプリケーションアーキテクチャを改善します。それらの機能が類似している場合は、DRYの原則を適用できます。コードを再利用して、レデューサーのようなものすべてをカバーできるテストヘルパーを作成する機会が増えました。

結論

このシリーズのパート1では、JestとEnzymeのインストールとセットアップの方法を紹介しました。パート2では、Reactコンポーネントのテストについて説明しました。パート3では、Reduxアクションのテストについて説明しました。そして、この投稿では、レデューサーのテストを行いました。

これで、React / Reduxアプリケーションをテストするための、十分にまとまったセットアップと付随する知識が得られるはずです。テストは難しいことではありません。フォローしていただきありがとうございます！

getdocs

13036