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

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

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

シリーズ

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

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

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

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

おかげ redux-mock-store インストールしたnpmパッケージは、わずか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-store APIドキュメント。

The dispatch() メソッドは、モックストアを介してアクションをディスパッチします。アクションはインスタンス内の配列に格納され、実行されます。
The getActions() メソッドは、モックストアのアクションを返します。
The 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レデューサーのテストを終了します。乞うご期待！

getdocs

13036