React テスト用に Jest を設定するにはどうすればよいですか?
公開: 2023-07-26フロントエンド フレームワークとして React を採用する開発者が増えているため、作成するコードが最高品質であることを保証することがますます重要になっています。 品質保証の重要な側面の 1 つはテストであり、Jest は React でよく使用される人気のあるテスト フレームワークです。
Jest は Facebook によって構築されたオープンソースのテスト フレームワークで、JavaScript コードのテストをできるだけ簡単かつ効率的に行うように設計されています。 高速で使いやすい API があり、テストを簡単にする多数の組み込み機能が付属しています。
この記事では、React テスト用に Jest をセットアップするプロセスについて説明します。 Jest のインストールから最初のテスト ケースの作成まで、始めるために知っておくべきことをすべてカバーします。
React テスト用の Jest
Jest は、React アプリケーションのテストに使用される一般的なテスト フレームワークです。 Facebook によって作成され、使いやすさとセットアップ時間の短縮で知られています。 Jest は、そのまま React で動作するように設計されており、テストを容易にする多くの機能を提供します。
Jest が React アプリケーションのテストによく選ばれる理由のいくつかを以下に示します。
i) スナップショット テスト: Jest は、コンポーネントの現在の出力を以前に保存されたスナップショットと比較できるスナップショット テスト機能を提供します。 これにより、コンポーネントの出力に意図しない変更が加えられたかどうかを簡単に確認できます。
ii) モッキング: Jest には、モック関数とモジュールを作成できる組み込みのモック機能が用意されています。 これは、すぐに利用できない、またはテストが難しい関数やモジュールの動作をシミュレートする必要がある場合に便利です。
iii) コード カバレッジ: Jest は、テストでカバーされるコードの割合を示すコード カバレッジ レポートを提供します。 これは、テストされておらず追加の注意が必要なコード領域を特定するのに役立ちます。
iv) 非同期テスト: Jest は、非同期コードを管理するためのユーティリティを提供することで、非同期コードのテストを容易にします。 これにより、アサーションを行う前に Promise やその他の非同期コードが解決されるのを待つテストを作成できます。
v) 簡単なセットアップ: Jest は、React アプリケーションのセットアップと構成が簡単です。 すぐに使えるデフォルト構成が付属していますが、特定のニーズに合わせてカスタマイズできます。
全体として、Jest は、React アプリケーションのテストを容易にする強力で柔軟なテスト フレームワークです。 多くの機能と簡単なセットアップにより、React コンポーネントの信頼性の高いテストを作成したい開発者にとって人気の選択肢となっています。
React テスト用の Jest のセットアップ
2023 年に React テスト用に Jest を設定するには、従う必要がある特定の手順があります。
1) Jestをインストールする
Jest は、npm または Yarn を使用してプロジェクトにインストールできます。 npm を使用して Jest をインストールする手順は次のとおりです。
i) ターミナルまたはコマンド プロンプトを開き、プロジェクト ディレクトリに移動します。
ii) 次のコマンドを実行して、Jest を開発依存関係としてプロジェクトにインストールします。
npm install –save-dev jest
このコマンドは Jest をインストールし、プロジェクトの package.json ファイルの devDependency セクションに追加します。
インストールが完了したら、Jest を使用してテストの作成を開始できます。 npm test コマンドを使用してテストを実行できます。 デフォルトでは、Jest は.test.jsまたは.spec.js拡張子の付いた名前のテスト ファイルを検索します。 ただし、Jest 構成ファイルの testMatch プロパティを変更することで、他の拡張機能を持つテストを検索するように Jest を構成できます。
それでおしまい！ これでプロジェクトに Jest がインストールされ、アプリケーションのテストの作成を開始できるようになりました。
2) 設定ファイルを作成する
Jest の構成ファイルを作成するには、プロジェクトのルート ディレクトリにjest.config.jsという名前のファイルを作成します。 このファイルには、テストの実行時に Jest が使用する必要がある構成オプションが含まれます。
構成ファイルの例を次に示します。
module.exports = {
// どのファイル タイプをテスト ファイルとして考慮する必要があるかを示します。
テストマッチ: [
'**/__tests__/**/*.js?(x)',
'**/?(*.)+(spec|test).js?(x)'
]、
// Jest がファイルの検索に使用するディレクトリへのパスのリスト。
ルート: ['<rootDir>/src']、
// 正規表現からトランスフォーマーへのパスへのマップ。
変身： {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
}、
// Jest がテスト ファイルを検出するために使用する glob パターン。
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<ルートディレクトリ>/build/'
]、
// Jest がカバレッジ レポートを作成するときに使用するレポーター名のリスト。
カバレッジレポーター: ['json', 'text', 'html'],
// モジュールが使用するファイル拡張子の配列。
moduleFileExtensions: ['js', 'json', 'jsx']
};
この構成ファイルの例では、次のオプションを指定します。
a) testMatch:テスト ファイルを識別するために使用されるパターンを指定します。
b) ルート: Jest がファイルを検索するディレクトリを指定します。
c) 変換:テストを実行する前に Jest がファイルに適用する変換を指定します。
d) testPathIgnorePatterns:テスト ファイルを検索するときに無視するパターンを指定します。
e) CoverageReporters: Jest がカバレッジ レポートの生成に使用するレポーターを指定します。
f) moduleFileExtensions: Jest がファイルを検索するときに検索するファイル拡張子を指定します。
プロジェクトのニーズに合わせてこの構成ファイルを変更できます。 構成ファイルを作成すると、Jest はプロジェクトでテストを実行するときにそのファイルを自動的に使用します。
3) テストを作成する
Jest をインストールし、構成ファイルをセットアップしたら、React アプリケーションのテストの作成を開始できます。 テスト ファイルを作成してテストを記述する手順は次のとおりです。
i)拡張子.test.jsまたは.spec.jsを持つ新しいファイルを作成します。 これがテスト ファイルになります。
ii)テスト ファイルに、テストするコンポーネントまたは機能をインポートします。
import { sum } from './myFunctions';
iii)テストを作成します。 テストは、Jest API を使用して、コンポーネントまたは関数が期待どおりに動作するかどうかをチェックする関数です。
description('合計', () => {
test('1 + 2 を足して 3', () => {
Expect(sum(1, 2)).toBe(3);
});
});
この例では、2 つの数値を加算する単純な sum 関数をテストしています。 description 関数は関連するテストをグループ化するのに対し、test 関数は単一のテスト ケースを指定します。 Expect 関数は、sum 関数が期待値を返すかどうかをチェックします。
iv)プロジェクト ディレクトリで npm test コマンドを実行して、テストを実行します。 Jest はプロジェクト内のテスト ファイルを検索し、見つかったテストを実行します。
コンポーネントまたは関数のすべての機能をカバーするために、必要なだけテストを追加できます。 Jest は、より複雑なテストの作成に使用できる幅広い一致やその他のユーティリティを提供します。
React アプリケーションのテストを作成することで、コードが期待どおりに動作することを確認し、コードベースに変更を加えたときにリグレッションが発生するのを回避できます。
4) テストを実行する
Jest を使用してテストを実行するには、プロジェクト ディレクトリで npm test コマンドを使用できます。 Jest は、Jest 構成ファイルで指定されたパターンに一致するプロジェクト内のテスト ファイルを自動的に検出して実行します。
npm test を実行すると、Jest はテストの結果をコンソールに出力します。 すべてのテストに合格すると、Jest はテスト結果の概要を表示します。
PASS src/components/Example.test.js
✓ クラッシュせずにレンダリング (21 ミリ秒)
テストスイート: 1 つ合格、合計 1 つ
テスト: 1 回合格、合計 1 回
スナップショット: 合計 0
時間: 3.204 秒、推定 4 秒
すべてのテストスイートを実行しました。
いずれかのテストが失敗した場合、Jest は失敗と失敗したテストの場所を説明するエラー メッセージを表示します。
失敗 src/components/Example.test.js
- コンポーネントの例 › クラッシュせずにレンダリング
TypeError: 未定義のプロパティ 'map' を読み取れません
10 | 与える（） {
11 | const { アイテム } = this.props;
> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);
| ^
13 | }
14 | }
15 |
Example.render で (src/components/Example.js:12:17)
ReactTestRenderer.render で (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)
Object.<anonymous> で (src/components/Example.test.js:9:16)
テストスイート: 1 個が失敗、合計 1 個
テスト: 1 回失敗、合計 1 回
スナップショット: 合計 0
時間: 3.537 秒、推定 4 秒
すべてのテストスイートを実行しました。
Jest には、ウォッチ モードでのテストの実行、コード カバレッジ レポートの生成など、テストの動作をカスタマイズするために使用できるさまざまなオプションも用意されています。 これらのオプションの詳細については、Jest ドキュメントを参照してください。
まとめ
LambdaTest は、Jest と組み合わせて React アプリケーションをテストできる強力なクラウドベースのテスト プラットフォームです。 LambdaTest のクラウドベースのインフラストラクチャのスケーラビリティを活用することで、さまざまなブラウザやデバイスで Jest テストを迅速かつ効率的に実行でき、アプリケーションがさまざまな環境で期待どおりに動作することを確認できます。
このブログでは、React アプリケーションをテストするために Jest をセットアップするために必要な手順について説明しました。 また、LambdaTest をテスト環境として使用するように Jest を設定する方法、Jest を使用してテストを作成する方法、LambdaTest のクラウドベースのインフラストラクチャでテストを実行する方法も学びました。
LambdaTest と Jest を併用すると、React 開発者に堅牢なテスト ソリューションが提供され、開発サイクルの早い段階で回帰やバグを発見し、アプリケーションの全体的な品質を向上させることができます。
したがって、React テストのワークフローを合理化したい場合は、LambdaTest と Jest を併用して、React アプリケーションの包括的でスケーラブルで効率的なテストを実現することを検討してください。