JESTを使用して反応コンポーネントをテストする方法

この記事では、FacebookにメンテナンスしたテストフレームワークであるJestを使用して、反応コンポーネントとプレーンJavaScript機能をテストするためのJestを使用して調査します。 反応固有の機能に移行する前に、簡単なJavaScript関数から始めます。 Jestは反応専用ではありません。 JavaScriptアプリケーションに十分に多用途です。ただし、その機能はUIテストに特に役立ち、Reactに最適です。

キーポイント：

jestを使用して、反応コンポーネントとJavaScript関数をテストします。

• JavaScript関数から始めて、Jestの基本を学習します
反応の互換性のためにJestとBabelをインストールします。
Jestの時計モードを使用して、効率的なテスト再ランニングを使用してください
• 反応成分については、酵素または反応テストライブラリを検討してください。
• Jestのモッキング、スパイ、並列テストを利用します
• サンプルTODOアプリケーション：

小さなTODOアプリケーション（GitHubおよびLive Demoで利用可能）は、私たちのテスト主題として機能します。 ES2015、Webpack、およびBabelを使用して構築されています。コアロジックは、アプリケーションの状態を管理する純粋な関数（

、、）が含まれている

に存在します。 これらの関数は、Redux Reducers.

に類似しています app/state-functions.jstoggleDoneテスト駆動型開発（TDD）：addTododeleteTodo

TDD（コードの前にテストを書く）には利点がありますが、アプローチは個人的な好みの問題です。 Reactコンポーネントの場合、最初にコンポーネントを作成し、テストを追加することが実用的であることがよくあります。

jestの紹介：

Facebookによって大幅に改善されたJestは、他のフレームワークと比較して合理化されたセットアップを提供します。その並列テストの実行およびウォッチモードは、テスト速度と効率を大幅に改善します。 Node.js内のブラウザのようなテストのためのJSDOMが含まれ、非同期テスト、モッキング、スパイ、スタブをサポートします。

インストールと構成：

必要なパッケージをインストール：

ファイルが存在することを確認します（元の記事で提供されている例）。 jestは

ディレクトリでテストを期待しています（またはまたはで終了するファイル）。

ビジネスロジックのテスト：

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

babel.config.jsの簡単なテストは、Jestの使用法を示しています __tests__ .test.js.spec.jsはオブジェクト/配列の比較に使用されますが、

はプリミティブタイプ用です。 Jestのウォッチモード（

または）は、ファイルの変更でテストを自動的に再実行します。 の同様のテストは、元の記事にも示されています。

反応成分のテスト：

toggleDone

テスト反応コンポーネントには、多くの場合、ビジネスロジックよりも包括的なテストが少なくなります。 酵素（またはReactチームが推奨する反応テストライブラリ）は、このプロセスを簡素化します。酵素と適切なアダプターをインストールします：

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

setup-tests.jsを作成して、酵素を構成します：

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

package.json：setup-tests.js：

を使用するにはjestを構成します

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

Todoコンポーネントレンダリングのテストが表示されます。 その後のテストでは、mountを作成してfindを作成し、イベントをトリガーし、jest.fn()。simulate('click')。 toBeCalledWith

結論：

Jestの速度、監視モード、および表現力豊かなAPIにより、強力なテストフレームワークになります。 この記事では、その利点の要約とさらに読む提案とともに、FAQがJESTを使用した反応コンポーネントのテストに関する一般的な質問に対処することで締めくくります。 FAQは

、反応テストレンダラー、プロップを使用したコンポーネントのテスト、およびコンポーネント内のテスト機能をカバーします。

以上がJESTを使用して反応コンポーネントをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。