Jest＆Enzymeを使用したReact/Reduxアプリのテスト-パート3：Reduxアクションのテスト

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

シリーズ

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

これから、Redux側のテストに移ります。ここから、ビジネスロジックとアプリケーションの状態のテストを開始します。アプリケーションでReduxを使用する利点は、ビジネスロジックをレンダリングから簡単に分離できることです。後者に焦点を当てたReduxテストを書くことができます。

それでは、飛び込んで、Reduxアクションのテストを書き始めましょう。

Reduxストアをモックアウトする

インストールしたredux-mock-storenpmパッケージのおかげで、わずか2行のコードでストアをモックできます。

__tests__/actions/select_actions.test.js

import configureStore from 'redux-mock-store';

// Actions to be tested
import * as selectActions from '../../actions/select_actions';

const mockStore = configureStore();
const store = mockStore();

// ...

ストアをモックした後、次に使用するdispatch()、getActions()、clearActions()などの非常に優れたテストヘルパーにアクセスできます。使用可能なメソッドの完全なリストについては、redux-mock-storeAPIドキュメントを確認してください。

dispatch()メソッドは、モックストアを介してアクションをディスパッチします。アクションはインスタンス内の配列に格納され、実行されます。
getActions()メソッドは、モックストアのアクションを返します。
clearActions()メソッドは、保存されているアクションをクリアします。セットアップと分解に最適です。

モックストアを無菌状態に保つ

単体テストでは、多くのテストが連続して実行されます。以前のテストの結果が得られないようにするために、各テストを実行する前に、モックストアからすべてのアクションをクリアするための少量のセットアップコードを記述します。これにはclearActions()を活用します。

__tests__/actions/select_actions.test.js

// ...

describe('select_actions', () => {
  beforeEach(() => { // Runs before each test in the suite
    store.clearActions();
  });

  // ...

});

アクションをテストする

Reduxの状態を適切に更新するには、正しいアクションとペイロードがレデューサーにディスパッチされていることを確認する必要があります。テストでは、dispatch()を使用してアクションをモックストアにディスパッチします。次に、getActions()を使用して、正しいアクションタイプとペイロードが返されることを確認します。

それでは、select_actionsテストスイートの内部に入り、いくつかのアクションテストを追加しましょう。

__tests__/actions/select_actions.test.js

// ...

describe('selectAvatar', () => {
  test('Dispatches the correct action and payload', () => {
    const expectedActions = [
      {
        'payload': 1,
        'type': 'select_avatar',
      },
    ];

    store.dispatch(selectActions.selectAvatar(1));
    expect(store.getActions()).toEqual(expectedActions);
  });
});

// ...

テストに合格すると、Jestのスナップショットテストを利用できます。これには、テストコードを減らすことができるという追加の利点があります。次に例を示します。

__tests__/actions/select_actions.test.js

// ...

describe('selectAvatar', () => {
  test('Dispatches the correct action and payload', () => {
    store.dispatch(selectActions.selectAvatar(1));
    expect(store.getActions()).toMatchSnapshot();
  });
});

// ...

パート2のスマートコンポーネントのテストセクションを思い出してください。コンポーネントとは別にアクションをテストすることをお勧めします。そのセクションのコード例でexpect()アサーションを見ると、おなじみのコードがいくつかあります。これは、テストカバレッジを失うことなく物事を分離しておくことができることを示しています。

ボーナスのヒント！

非常に高度なアクションテストの作成に取り掛かることができます。アクションでそれを提供したいのですが、少ないほど多くなります。複雑なテストをたくさん書いていることに気付いた場合は、Reduxアーキテクチャを再考する必要があるかもしれません。 Reduxのアクションの管理、検討、テストに関しては、物事は軽くて簡単に感じるはずです。特にこの設定では。思考の糧！

次は何ですか？

このシリーズのパート1では、JestとEnzymeのインストールとセットアップの方法を紹介しました。パート2では、Reactコンポーネントのテストについて説明しました。パート4では、Reduxレデューサーのテストを終了します。乞うご期待！