この4部構成のシリーズでは、JestEnzymeの両方を使用して、 React /Reduxアプリケーションをテストする方法を学びます。

このシリーズはテストに焦点を当てており、React/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 Coverage Report

スナップショットを使用する場合

Jestは、スナップショットテストと呼ばれる優れた機能を提供します。 それが何であるかをよく知らない場合は、次の投稿または私たちの投稿を読むことができます:Jestを使用したスナップショットテストの概要

スナップショットは、変更する予定がない、または将来変更したくないものをテストするのに理想的です。 スナップショットは、回帰テストの形式を提供します。 これらを使用して、コンポーネント、アクション、およびレデューサーをテストし、必要な場合にのみ変更されることを確認します。

スナップショットを使用しない場合

テストを実行するたびに何かが異なることがわかっている場合、または新しいコンポーネント、アクション、またはレデューサーの作成を最初に開始する場合は、スナップショットを使用しないでください。

例1:ランダムな文字列を返すユーティリティ関数があります。 スナップショットは毎回異なるため、スナップショットでこれをテストすることはできません。 代わりに、文字列が適切な長さであり、生成される文字列のタイプに基づいて正しいタイプの文字で構成されていることをテストすることをお勧めします。

例2:新しいコンポーネントの作成を開始したばかりで、テストを作成しています。 最初はスナップショットを避けることをお勧めします。 代わりに、コンポーネントを磨いて、それがどうなるかを知っているものに近づけてください。 次に、スナップショットの使用に切り替えます。

非同期テスト

非同期テストの作成例については、Jestの非同期テストの投稿を参照してください。

次は何ですか?

このシリーズのパート2では、Reactコンポーネントをテストする方法について説明します。 パート3では、Reduxアクションのテストに進みます。 パート4で終了し、Reduxレデューサーをテストする方法を紹介します。 乞うご期待!