JestとEnzymeを使用したReact/Reduxアプリのテスト-パート1:インストールとセットアップ
この4部構成のシリーズでは、JestとEnzymeの両方を使用して、 React /Reduxアプリケーションをテストする方法を学びます。
このシリーズはテストに焦点を当てており、React/Reduxの知識があることを前提としています。
シリーズ
- パート1 :インストールとセットアップ( この郵便受け )。
- パート2:Reactコンポーネントのテスト
- パート3:Reduxアクションのテスト
- パート4:Reduxレデューサーのテスト
推奨されるファイル構造
- デフォルトの動作を活用する:デフォルトでは、Jestは
__tests__
フォルダーでテストを検索します。 - フォルダー階層:
src
フォルダー階層をミラーリングして、テスト管理を容易にします。 - タイプ別:コンポーネント、アクション、およびレデューサー用に別々のフォルダーを保持します。
- ファイル名の追加:テストを含むファイルの場合は、
.test.js
拡張子を使用して区別します。
.test.jsの代わりに.spec.js拡張子を使用することもできます。 私は後者が好きです。
. ├── __tests__ │ ├── actions │ │ └── gator_actions.test.js │ ├── components │ │ └── Gator.test.js │ ├── reducers │ │ └── gator_reducer.test.js │ └── setup │ └── setupEnzyme.js ├── src │ ├── actions │ │ ├── gator_actions.js │ │ ├── index.js │ │ └── types.js │ ├── components │ │ └── Gator.js │ ├── reducers │ │ ├── gator_reducer.js │ │ └── index.js │ └── store │ └── index.js ├── package.json └── README.md
ジェストと酵素のセットアップ
Jestは、開発者の経験を最前線に保つゼロ構成のJavaScriptテストプラットフォームです。
Enzymeは、ReactのJavaScriptテストユーティリティであり、Reactコンポーネントの出力のアサート、操作、およびトラバースを容易にします。
Jestをインストールする
ターミナルcd
で、テストするReact/Reduxアプリケーションのルートに移動します。 次に、Yarnとnpmのどちらを使用してJestを開発依存関係としてインストールするかに応じて、次のいずれかのコマンドを実行します。
糸:
$ yarn add -D jest
npm:
$ npm install -D jest
Enzymeをインストールする
Jestと簡単に統合するためにいくつかのピア依存関係を必要とするEnzymeをインストールしましょう。
次のコマンドは、React16を使用していることを前提としています。 別のバージョンを使用している場合は、使用しているバージョンのEnzymeアダプターをインストールしてください。
糸:
$ yarn add -D enzyme enzyme-adapter-react-16 enzyme-to-json
npm:
$ npm install -D enzyme enzyme-adapter-react-16 enzyme-to-json
Jestと連携するようにEnzymeを構成する
EnzymeをJestおよびReactと統合するために必要なボイラープレートコードが少量あります。
__tests __ / setup / setupEnzyme.js
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';
package.json
ファイルに以下を追加します。
package.json
"jest": { "setupTestFrameworkScriptFile": "<rootDir>__tests__/setup/setupEnzyme.js", "testPathIgnorePatterns": ["<rootDir>/__tests__/setup/"] }
Reduxテストヘルパーをインストールする
先に進んで、Reduxストアのモックアップを支援するためにいくつかのライブラリをインストールしましょう。
糸:
$ yarn add -D redux-mock-store
npm:
$ npm install -D redux-mock-store
テストを実行するためのカスタムスクリプトを追加する
Yarnまたはnpmのいずれかを使用してテストを実行するためのエイリアスをいくつか作成しましょう。
npmスクリプトを介してエイリアスを作成すると、プロジェクト間でテストを実行するための共通のインターフェイスを維持できます。このインターフェイスには、使用されているパラメーターが異なるフラグが含まれている場合があります。
package.json
... "scripts": { "test": "jest", "test:watch": "jest --watch" }, ...
次のようなテストを実行できます。
糸:
// Single run $ yarn test // Watchmode $ yarn test:watch
npm:
// Single run $ npm run test // Watchmode $ npm run test:watch
一般的なテストのヒント
テストをスイートに整理する
Jestとdescribe()
を使用すると、テストをスイートに整理しておくのは非常に簡単です。 これにより、テストの保守が少し簡単になります。 また、テスト結果の出力に表示される組織も表示されます。
例:
__tests__/actions/gator_actions.js
... describe('gator_actions', () => { beforeEach(() => { store.clearActions(); }); describe('eatFood', () => { test('Dispatches the correct action and payload', () => { store.dispatch(gatorActions.eatFood('fish')); expect(store.getActions()).toMatchSnapshot(); }); });
試験結果
PASS __tests__/actions/gator_actions.test.js gator_actions eatFood ✓ Dispatches the correct action and payload (1ms) layEggs ✓ Dispatches the correct action and payload (1ms)
Jestの組み込みカバレッジレポートを活用する
Jestを使用すると、テスト実行スクリプトに--coverage
フラグを追加することにより、カバレッジレポートを生成できます。 これですべてです。
スナップショットを使用する場合
Jestは、スナップショットテストと呼ばれる優れた機能を提供します。 それが何であるかをよく知らない場合は、次の投稿または私たちの投稿を読むことができます:Jestを使用したスナップショットテストの概要。
スナップショットは、変更する予定がない、または将来変更したくないものをテストするのに理想的です。 スナップショットは、回帰テストの形式を提供します。 これらを使用して、コンポーネント、アクション、およびレデューサーをテストし、必要な場合にのみ変更されることを確認します。
スナップショットを使用しない場合
テストを実行するたびに何かが異なることがわかっている場合、または新しいコンポーネント、アクション、またはレデューサーの作成を最初に開始する場合は、スナップショットを使用しないでください。
例1:ランダムな文字列を返すユーティリティ関数があります。 毎回異なるため、スナップショットでこれをテストすることはできません。 代わりに、文字列が適切な長さであり、生成される文字列のタイプに基づいて正しいタイプの文字で構成されていることをテストすることをお勧めします。
例2:新しいコンポーネントの作成を開始したばかりで、テストを作成しています。 最初はスナップショットを避けることをお勧めします。 代わりに、コンポーネントを磨いて、それがどうなるかを知っているものに近づけてください。 次に、スナップショットの使用に切り替えます。
非同期テスト
非同期テストの作成例については、Jestの非同期テストの投稿を参照してください。
次は何ですか?
このシリーズのパート2では、Reactコンポーネントをテストする方法について説明します。 パート3では、Reduxアクションのテストに進みます。 パート4で終了し、Reduxレデューサーをテストする方法を紹介します。 乞うご期待!