jest configuration debugging jest based tests
使い慣れたオペレーティングシステムをリストしてください
Jest Config、デバッグ、およびJestを他のJavaScriptテストフレームワーク（具体的にはJest vs Mocha＆Jest vs Jasmine）と比較する方法について説明します。
これで 有益なジェストシリーズ 、私たちはすべてを探索しました Jestを使用したReactアプリ、モック、スパイのテスト 前回のチュートリアルで。
このチュートリアルでは、Jest Configファイルについて詳しく学び、1つ以上の複数のテストのトラブルシューティングのためにJestテストを実際にデバッグする方法を確認します。
また、プロジェクトで個別に設定できるJest Configファイルで一般的に使用されるオプション、またはpackage.json構成自体の一部として追加できるオプションについても説明します。
Jestテストの記述にはVisualStudio Codeを使用し、VSCodeの拡張機能またはプラグインを使用してJestテストのデバッグサポートを有効にします。
さらに、MochaやJasmineなどのさまざまなJavascriptテストフレームワークをJestと比較し、互いの長所と短所を理解します。
学習内容：
構成があります
ジェスト構成は3つの方法で指定できます
- package.jsonファイルのキーを介して。
- jest.config.jsファイルを介して–モジュールとして記述された構成ファイル。
- –configフラグとしてのオプションとともに使用できるJSONを介して。
上記のすべてのアプローチで、同じ結果を達成できます。最初のステップ、つまりpackage.jsonファイルのキーを使用してJest構成を追加する方法を見てみましょう。
既存のpackage.jsonファイルに、「jest」という名前の新しいキーを追加します。これは、JSON形式のキーと値のペアのセットに他なりません。 Jestに関連するすべての構成オプションは、package.jsonファイルのこのセクションにさらに追加できます。
最も頻繁に使用される構成オプションを以下に示します。
＃1）カバレッジ関連
collectCoverage、coverageThreshold、coverageReporters、coverageDirectory –これらは最も広く使用されているオプションです。カバレッジは重要なメトリックであり、事前設定されたしきい値に対してコードがテストされることを保証します。
それぞれの詳細な説明は次のとおりです。
＃1）collectCoverage： このオプションは、Jestテストランナーにカバレッジ情報を収集させるかどうかを指定するために使用されます。 trueに設定すると、Jestランナーがカバレッジ情報を収集します。このオプションを使用すると、以下に示すように、テスト実行の最後にカバレッジが収集され、コンソールに表示されます。
＃2）coverageThreshold： この設定により、カバレッジのしきい値をパーセンテージで指定できます。これは、組織またはチームがカバレッジの特定の最小値を順守したい場合に非常に役立ちます。これがないと、コードをメインブランチにプッシュまたはマージできません。
これをどのように使用できるか見てみましょう。
カバレッジは、グローバルレベル、ファイルレベル、またはその他の正規表現で指定できます。グローバルレベルで指定する場合、指定したすべてのしきい値は、プロジェクト内のすべてのファイルを組み合わせたものと一致する必要があります。
'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 } } 「グローバル」をファイル名または正規表現に変更することにより、ファイルレベルでカバレッジを指定することもできます。しきい値の構成は、要件によって異なります。
'coverageThreshold': { './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } } ＃3）coverageReporters： この構成は、カバレッジレポートを生成するために使用するレポーターを指定するために使用されます。テスト実行の最後にカバレッジレポートを生成するために使用できるNPMパッケージとして、既存のレポーターが多数あります。
＃4）coverageDirectory： この設定により、ユーザーは、カバレッジレポートを作成した後、保存または永続化するディレクトリを指定できます。
以下に示すのは、カバレッジに関連するすべての構成設定を使用する組み合わせの例です。
'jest':{ 'collectCoverage':true, 'coverageThreshold': { 'global': { 'branches':95, 'functions':100, 'lines':70, 'statements':-2 }, './src/calculator.js': { 'branches':100, 'functions':100, 'lines':100, 'statements':-10 } }, 'coverageReporters': ( 'lcov','text' ), 'coverageDirectory': './output/code-coverage/' } ここでは、2つのカバレッジレポーター（lcovとtext）を使用しました。LcovはLinuxのラインカバレッジであり、デフォルトで存在します。「text」レポーターは、カバレッジ出力がコンソールにも表示されることを意味します。カバレッジレポートは、「coverageDirectory」設定で指定されたパスで生成されます。
＃2）モック関連
Jestでのテストでは、モックが頻繁に使用されます。以下の構成オプションはどちらも、簡単な構成とモックのクリアを可能にします。
- autoMocks： trueに設定すると、デフォルトでテストにインポートされるすべてのモジュールがモックされます。
- clearMocks： trueに設定すると、各テスト後にすべてのモックされたセットアップ/モジュールがクリアされるため、すべてのテストが新しい状態で開始されます。これは、testCleanupまたは「after」メソッドを使用して実現することもできますが、configに含めるとさらに簡単になります。
＃3）関連するテスト
＃1）testTimeout： この構成は、ミリ秒単位のテストのハードタイムアウト設定を提供するために使用されます。この設定されたしきい値を超えるテストは、タイムアウト例外のために失敗としてマークされます。
'jest' { 'testTimeout': 100 } ＃2）グローバル： この構成は、各テストで使用できるグローバル変数を設定するために使用されます。
'jest' { 'globals': { 'globalVar': 'test global variable!' } } テストでグローバル変数を使用してみて、期待どおりに機能するかどうかを確認してみましょう。
describe('Calculator tests', () => { test('add 2 numbers', () => { // arrange & act const val = mathOps.sum(3,4) console.log(globalVar) // assert expect(val).toBe(7) }) このテストを実行した後、globalVarの値をログに記録する必要があります。
小切手 ここに すべての構成オプションの完全なリストについては。
IS構成に関するビデオチュートリアル
Jestを使用したデバッグ
このセクションでは、Jestに基づいて作成されたテストをデバッグする方法を理解しようとします。
Jestテストをデバッグする2つの異なる方法を適用して理解します。
- ノードのネイティブデバッガー、次にChromeInspectorを使用してテストをデバッグします。
- Visual Studio Codeのデバッグ構成を使用して、Visual StudioCodeエディター自体の中でテストをデバッグします。 Visual Studio Codeは、最近のほとんどのJavascript開発で選択されるデフォルトのエディターであるため、これはデバッグに最も一般的に使用される方法です。
これらの各アプローチについて、以下で詳しく説明します。
＃1）ノードのネイティブデバッガーの使用
Node JSネイティブデバッガーを使用するには、ブレークポイントを配置するテストに「debugger」キーワードを挿入する必要があります。
テストエグゼキュータが デバッガ コマンドを実行すると、実行が一時停止します。Chromeデバッガーツールをアタッチすると、Chromeツールを使用してテストコード（およびテスト対象の関数）をデバッグできます。
ここでは、ノードのネイティブデバッガーを使用するためにChromeブラウザが前提条件です。
以下の手順に従ってください。
＃1） テスト内にデバッガキーワードを追加します。つまり、テストをブレークポイントに到達させたいポイントに、「debugger」コマンドを挿入します。
＃二） –inspect-brkフラグを使用してテストを実行します。
以下のコマンドを使用して、ブレークポイントモードでテストを実行します。
/usr/local/bin/node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand＃3） Chromeでノードのデバッガーを接続します。 Chromeブラウザで、chrome：// inspectに移動し、上記の手順で作成したターゲットリスナーに接続します。
＃4） 実行を続行すると、クロームデバッガーインスペクターでブレークポイントがヒットし、クロームデバッガー自体でコールスタックとオブジェクトの状態をデバッグできることがわかります。
Jestテストをデバッグするこのアプローチは問題ありませんが、コードエディターからChromeに、またはその逆に切り替え続ける必要があるため、ユーザーフレンドリーではありません。これにより、多くの摩擦が発生します。次のセクションでは、Visual StudioCodeエディター自体の中でデバッガーを構成する方法を説明します。
Windows10に最適なファイアウォールは何ですか
＃2）VSCodeのデバッグ構成を使用する
＃1） 左側のパネルからVisualStudioCodeの(デバッグ/実行)セクションを選択します。
＃二） ここで、jestテストのデバッグ構成を更新します。これを行うには、メニューオプションを選択して新しい構成を追加します。
＃3） 構成の追加オプションを選択すると、エディターペインにデフォルトのコンテンツで `launch.json`ファイルが開きます。デフォルトのコンテンツを削除し、以下のコンテンツをコピーして、Jestテストのデバッグ構成を作成します。
{ 'version': '0.2.0', 'configurations': ( { 'name': 'Debug Jest Tests', 'type': 'node', 'request': 'launch', 'runtimeArgs': ( '--inspect-brk', '${workspaceRoot}/node_modules/jest/bin/jest.js', '--runInBand' ), 'console': 'integratedTerminal', 'internalConsoleOptions': 'neverOpen', 'port': 9229 } ) } ＃4） Jestテストのデバッグに使用される新しく追加されたコンテンツ構成を保存します。設定を注意深く読むと、コマンドを使用してChromeデベロッパーツールでノードデバッガに接続しようとしたときと同じようになります。
--inspect-brk ./node_modules/jest/bin/jest.js --runInBandここで構成を行うことの利点は、テストがエディター自体（この場合はVSCode）の一部として実行/デバッグされ、外部アプリケーションに接続する必要がないことです。
＃5） デバッグ構成が作成されると、テストにブレークポイントを追加し、このRUN構成を使用して実行できるようになります。これにより、テストがブレークポイントで停止し、実際のテストファイルのブレークポイントで値やオブジェクトの状態をデバッグできるようになります。
コードファイルの行番号の近くをクリックすると、ブレークポイントを追加できます。
＃6） ブレークポイントが追加されると、テストを実行/デバッグするために、ステップ＃3で追加した実行構成を選択できます。
＃ 7） (実行)ボタンを選択/クリックすると、実行が配置されたブレークポイントに到達したことを確認でき、ブレークポイントでの環境/変数値、スタックトレースなどの詳細を取得できます。
ブレークポイント/コードフロー制御ボタンを使用して、次のブレークポイントに移動したり、関数内に移動して詳細を確認したりできます。
ビデオチュートリアル彼はデバッグ
モカ対ジャスミンがあります
以下のセクションでは、さまざまなパラメーターと、スナップショットテスト、構成の容易さ、さまざまなフレームワークの機能などの機能の比較について、JestとMochaおよびJestとJasmineを比較します。
| パラメータ | です | モカ | ジャスミン |
|---|---|---|---|
| サポートされているテストタイプ | 主にユニットテストに使用されます。 | ユニットテスト | ユニットテストとE2Eテスト。 |
| スナップショットテスト | 完全にサポート-Reactコンポーネントに特に使用されるJestは、コンポーネントのスナップショットを取得し、それを使用してテスト出力を保存されたコンポーネント構造と比較することをサポートします。 スナップショットは、UIが予期せず変更されないようにするための優れた方法です。 | サポートなし | サポートなし |
| アサーションとマッチャー | マッチャーにはexpect.jsライブラリを使用します。 | ノードの組み込みアサーションモジュールのサポート。他のアサーションライブラリを含めることもできます。 | 構築されたアサーションで |
| 嘲笑 | Jestのモックとスタブのサポートが完全に組み込まれています。 | モックやスタブのサポートは組み込まれていません。 シノンのような他のライブラリと一緒に使用して、モッキングをサポートできます。 | spyOnを使用した限定サポートが組み込まれています。 他のライブラリと統合できます。 |
| 実行速度 | 4倍 ジェストテストは、独自のサンドボックスに分離されています。したがって、Jestテストは基本的に並行して実行されるため、実行時間が大幅に改善されます。 | バツ テストの並列実行はサポートしていません。 | バツ テストの並列実行はサポートしていません。 |
| 構成とセットアップ | 非常に簡単-設定は不要です。 | ||
| テスト実行のモード | ヘッドレス | ヘッドレス | ヘッドレス |
| テスト出力とコンテキスト | 実行後にリッチコンテキストを生成します-Jestは、障害の原因を深く掘り下げてデバッグを容易にする詳細なテストコンテキストを提供します。 | テスト出力はあまり読みにくく、デバッグが少し難しくなります。 | |
| デバッグ | ネイティブノードデバッガーのサポートを使用して、別の起動構成を介してVisual StudioCodeなどのエディター内でデバッグすることもできます。 | ネイティブノードデバッガーをサポートします。 | カルマテストランナーを使用して、Chromeでテストを起動してデバッグできます。 |
| コードカバレッジ | Jestには、コードカバレッジのサポートが組み込まれています。 カバレッジ構成はJest構成で指定でき、レポートはテストの実行ごとに生成できます。 | 組み込みのサポートはありません。カバレッジレポートを生成するための外部ライブラリのサポートを提供します。 | モカと同じ |
| テストのスタイル | BDD 3つのフレームワークはすべて、テストをより読みやすくするための一連の仕様または仕様として記述されるテストをサポートしています。 | BDD | BDD |
結論
このチュートリアルでは、Visual Studio Code内で、またはノードのネイティブデバッガーを使用してChromeInspectorでJestテストをデバッグするさまざまな方法について学習しました。
また、Jest構成ファイルで一般的に使用される構成オプションについても説明しました。 Jest構成は、コードカバレッジ、Htmlレポート、モック動作の設定、グローバル変数の設定など、多くのことを実現するのに役立ちます。