Jest&Enzymeを使用したReact/Reduxアプリのテスト-パート4:Reduxレデューサーのテスト
これは、堅牢なテストソリューションのために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
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アプリケーションをテストするための、十分にまとまったセットアップと付随する知識が得られるはずです。 テストは難しいことではありません。 フォローしていただきありがとうございます!