ホームページ >ウェブフロントエンド >jsチュートリアル >コードカバレッジ率を取得するにはどうすればよいですか? ✅
100% のコード カバレッジの達成: 実践ガイド
この記事では、プロジェクトのコード カバレッジを 100% 効率的に達成する方法について詳しく説明します。 飛び込んでみましょう!
準備
始める前に、次の主要なコンポーネントを確認してください:
事前に計画を立てると、テスト プロセスが合理化されます。
実際の実装
この例では TypeScript ファイルを使用します:
プロジェクトのルート ディレクトリに test
フォルダーを作成します。 テストは、.test.ts
拡張子 (または .spec.ts
などの同様のもの) を持つファイルに配置されます。
カバレッジレポートには Mocha、Sinon、c8 を使用します:
<code class="language-json"> "devDependencies": { "@types/mocha": "^10.0.9", "@types/sinon": "^17.0.3", "c8": "^10.1.2", "mocha": "^10.8.2", "sinon": "^19.0.2" }</code>
これらのパッケージをインストールする必要があります。 追加のライブラリは後で追加されます。
次のコマンドはテストを実行し、レポートを生成します:
<code class="language-json"> "scripts": { "test": "mocha --require ts-node/esm --experimental-specifier-resolution=node", "test:watch": "mocha --watch --require ts-node/esm --experimental-specifier-resolution=node", "coverage": "c8 --reporter=lcov npm run test", "coverage:default": "c8 npm run test" },</code>
test:watch
コマンドは重要です。コード変更時にテストが自動的に再実行されるため、手動での再起動が不要になります。
TypeScript のコンパイルには追加のモジュールが必要です:
<code class="language-json"> "devDependencies": { "ts-node": "^10.9.2", "typescript": "^5.6.3" }</code>
例: 単純な関数のテスト
この add
関数をテストしてみましょう:
add.test.ts
<code class="language-typescript">export function add(a: number, b: number): number { return a + b; }</code>
対応するテスト ファイル:
add.ts
<code class="language-typescript">import { strict as assert } from 'assert'; import { add } from '../add'; describe('Function add()', () => { it('should return 5 when adding 2 and 3', () => { const result = add(2, 3); assert.equal(result, 5); }); // ... more test cases ... });</code>
これは、予想される結果と実際の結果を比較します。 テストの失敗は問題を示しています。 徹底的なテストにより、コードの変更によって既存の機能が損なわれないことが保証されます。
DOM インタラクションのテスト
DOM 操作 (クリック イベントなど) をテストするには、jsdom
と jsdom-global
をインストールします:
<code class="language-json">"devDependencies": { "@types/node": "^22.9.0", "jsdom": "^25.0.1", "jsdom-global": "^3.0.2", }</code>
次のパッケージを構成します:
<code class="language-javascript">require("jsdom-global")(); global.DOMParser = window.DOMParser;</code>
これにより、Node.js がブラウザの DOM 環境をシミュレートできるようになります。
非同期操作のテスト
非同期関数 (API 呼び出しなど) の場合は、nock
と node-fetch
を使用します:
<code class="language-json">"devDependencies": { "nock": "^13.5.6", "node-fetch": "^2.7.0", }</code>
次のパッケージを構成します:
<code class="language-javascript">import fetch from "node-fetch"; global.fetch = fetch as any;</code>
nock
は API 応答を模擬し、予測可能で安定したテスト環境を提供します。 node-fetch
は、Node.js のブラウザーのような fetch
実装を提供します。
Codecov の統合
Codecov と統合するには、GitHub リポジトリを作成し、Codecov のセットアップ手順に従います。 GitHub Actions はレポートのアップロードを自動化できます。 GitHub Actions ワークフローのサンプル:
<code class="language-json"> "devDependencies": { "@types/mocha": "^10.0.9", "@types/sinon": "^17.0.3", "c8": "^10.1.2", "mocha": "^10.8.2", "sinon": "^19.0.2" }</code>
このワークフローはテストを実行し、プッシュまたはプル リクエストごとにカバレッジ レポートを Codecov にアップロードします。 Codecov バッジを README に追加できます。
結論
これらの手順に従い、特定のニーズに適応させることで、100% のテスト カバレッジを達成および維持し、コードの品質と信頼性を向上させることができます。 保守性を向上させるために、反復的なテスト コードを再利用可能な関数にリファクタリングすることを忘れないでください。
以上がコードカバレッジ率を取得するにはどうすればよいですか? ✅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。