はじめに
単體テストは、コードが期待どおりに動(dòng)作することを保証するソフトウェア開(kāi)発の基礎(chǔ)です。利用可能なさまざまなテスト フレームワークの中で、Jest は JavaScript 開(kāi)発者にとって主要な選択肢として浮上しています。シンプルさと効率性を念頭に置いて構(gòu)築された Jest を使用すると、開(kāi)発者は最小限の構(gòu)成で堅(jiān)牢な単體テストを作成できます。

Jest とは何ですか?
Jest は、Meta (舊 Facebook) によって開(kāi)発されたオープンソースの JavaScript テスト フレームワークです。 React、Node.js、その他の JavaScript ライブラリを使用して構(gòu)築されたアプリケーションとシームレスに統(tǒng)合するように設(shè)計(jì)されています。 Jest は使いやすさ、強(qiáng)力な機(jī)能、優(yōu)れた開(kāi)発者エクスペリエンスで知られており、テストを作成するための頼りになるツールとなっています。

Jest 単體テストを使用する理由
Jest は、単體テストの作成、編成、実行のプロセスを簡(jiǎn)素化します。開(kāi)発者が Jest を選ぶ理由は次のとおりです:

• ゼロ構(gòu)成: Jest は箱から出してすぐに動(dòng)作し、最小限のセットアップが必要です。
• 組み込みモッキング: 関數(shù)、モジュール、さらにはタイマーをモックするツールを提供します。
• スナップショット テスト: Jest は回帰テスト用に UI 出力をキャプチャします。
• 速度: Jest は効率を最大化するためにテストを並行して実行します。

プロジェクトでの Jest のセットアップ

前提條件
Jest を使用する前に、マシンに Node.js と npm がインストールされていることを確認(rèn)してください。

Jest のインストール
Jest をインストールするには、次のコマンドを?qū)g行します:

バッシュ

コードをコピー

npm install --save-dev jest

Jest の構(gòu)成
Jest を構(gòu)成するには、package.json ファイルに jest プロパティを追加するか、専用の jest.config.js ファイルを作成します。これにより、テスト ディレクトリ、カバレッジのしきい値などのオプションをカスタマイズできます。

Jest を使用して最初の単體テストを作成する

テスト ファイルの作成
Jest は、デフォルトで .test.js または .spec.js 拡張子を持つテスト ファイルを認(rèn)識(shí)します。たとえば、math.js で関數(shù)をテストしている場(chǎng)合は、math.test.js.

テストケースの作成
Jest テスト ケースの簡(jiǎn)単な例を次に示します。

JavaScript

コードをコピー

const add = (a, b) => a b;?

test('2 つの數(shù)値を加算', () => {

expect(add(2, 3)).toBe(5);?

});?

テストの実行
次のコマンドを使用してテストを?qū)g行します:

バッシュ

コードをコピー

npm テスト

Jest はすべてのテスト ファイルを識(shí)別し、そのファイル內(nèi)のテスト ケースを?qū)g行します。

単體テスト用の Jest の主な機(jī)能

モッキング関數(shù)
Jest を使用すると、関數(shù)とモジュールをモックしてコンポーネントを個(gè)別にテストできます:

JavaScript

コードをコピー

const mockFn = jest.fn();?

mockFn.mockReturnValue(42);?

expect(mockFn()).toBe(42);?

スナップショットのテスト
スナップショット テストにより、UI コンポーネントが予期せず変更されないことが保証されます。 Jest はコンポーネントの出力を保存し、後続のテスト実行中にそれを比較します。

JavaScript

コードをコピー

test('正しくレンダリングされます', () => {

const Tree = renderer.create().toJSON();?

Expect(tree).toMatchSnapshot();?

});?

コードカバレッジレポート
Jest は、コード カバレッジ レポートを生成するための組み込みサポートを提供します。

バッシュ

コードをコピー

npm テスト -- --カバレッジ

これにより、コードのテストされていない部分が強(qiáng)調(diào)表示されます。

Jest 単體テストを作成するためのベスト プラクティス

テストを獨(dú)立した狀態(tài)に保つ
信頼性と保守性を確保するために、テスト間の相互依存性を回避します。

わかりやすいテスト名を使用する
テスト対象のシナリオを明確に説明するテスト名を記述します (例: 「2 つの數(shù)値の合計(jì)を返す必要があります」.

)

エッジケースに焦點(diǎn)を當(dāng)てる
エッジケースをテストすることで、アプリケーションがさまざまな條件下で堅(jiān)牢であることを確認(rèn)します。

一般的な Jest テスト パターン

アレンジ?アクト?アサート (AAA)
テストを 3 つの異なるフェーズに構(gòu)造化します:

1. 手配: テスト データと環(huán)境をセットアップします。
2. 動(dòng)作: テスト対象の関數(shù)または機(jī)能を?qū)g行します。
3. アサート: 結(jié)果が期待と一致することを確認(rèn)します。

各フックの前後
これらのフックを使用すると、各テストの前後にリソースをセットアップまたはクリーンアップできます。

JavaScript

コードをコピー

beforeEach(() => {

initializeDatabase();?

});?

afterEach(() => {

clearDatabase();?

});?

Jest テストのデバッグ

監(jiān)視モードでのテストの実行
Jest の監(jiān)視モードは、変更が検出されるたびにテストを再実行します:

バッシュ

コードをコピー

npm テスト -- --watch

コンソール ログを使用したデバッグ
console.log() ステートメントを追加すると、テストの問(wèn)題を特定するのに役立ちます。

高度な Jest 機(jī)能

並列テストの実行
Jest はテストを並列実行して実行時(shí)間を短縮します。これは、大規(guī)模なテスト スイートに特に有益です。

非同期コードのテスト
Jest は、async/await、Promises、done():

などのユーティリティを使用して非同期テストを処理します。

JavaScript

コードをコピー

test('データを取得', async () => {

const data = await fetchData();?

expect(data).toBeDefined();?

});?

カスタムマッチャー
カスタム マッチャーを作成して Jest の機(jī)能を拡張し、テストをより表現(xiàn)力豊かにします。

Jest と他の単體テスト フレームワーク

使いやすさ
Mocha や Jasmine とは異なり、Jest は最小限のセットアップが必要なため、初心者に優(yōu)しいです。

組み込み機(jī)能
モックやアサーションなどの Jest の組み込み機(jī)能により、追加のライブラリの必要性が減ります。

コミュニティサポート
大規(guī)模なコミュニティと広範(fàn)なドキュメントを備えた Jest は、優(yōu)れたサポートと定期的なアップデートを提供します。

結(jié)論
Jest は、JavaScript アプリケーションで単體テストを作成および実行するための強(qiáng)力なツールです。そのシンプルさ、スピード、豊富な機(jī)能セットにより、開(kāi)発者の間で人気があります。ベスト プラクティスに従い、Jest の機(jī)能を活用することで、コードの信頼性、保守性、バグのなさを保証できます。

以上がJest を使用して単體テストをマスターする: 包括的なガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。