ホームページ >ウェブフロントエンド >jsチュートリアル >コードカバレッジ率を取得するにはどうすればよいですか? ✅

コードカバレッジ率を取得するにはどうすればよいですか? ✅

DDD
DDDオリジナル
2025-01-17 00:30:09589ブラウズ

100% のコード カバレッジの達成: 実践ガイド

この記事では、プロジェクトのコード カバレッジを 100% 効率的に達成する方法について詳しく説明します。 飛び込んでみましょう!

How to get % code coverage? ✅

準備

始める前に、次の主要なコンポーネントを確認してください:

  1. テスト範囲: テストするコードセグメント (関数、モジュールなど) を定義します。
  2. サードパーティ ライブラリ: テスト ライブラリ (例: Mocha) を選択します。
  3. レポート形式: レポート形式を選択します (例: Codecov の場合は lcov)。

事前に計画を立てると、テスト プロセスが合理化されます。

実際の実装

この例では TypeScript ファイルを使用します:

How to get % code coverage? ✅

プロジェクトのルート ディレクトリに test フォルダーを作成します。 テストは、.test.ts 拡張子 (または .spec.ts などの同様のもの) を持つファイルに配置されます。

How to get % code coverage? ✅

カバレッジレポートには 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 コマンドは重要です。コード変更時にテストが自動的に再実行されるため、手動での再起動が不要になります。

How to get % code coverage? ✅

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 操作 (クリック イベントなど) をテストするには、jsdomjsdom-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 呼び出しなど) の場合は、nocknode-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 に追加できます。

How to get % code coverage? ✅

結論

これらの手順に従い、特定のニーズに適応させることで、100% のテスト カバレッジを達成および維持し、コードの品質と信頼性を向上させることができます。 保守性を向上させるために、反復的なテスト コードを再利用可能な関数にリファクタリングすることを忘れないでください。

How to get % code coverage? ✅

以上がコードカバレッジ率を取得するにはどうすればよいですか? ✅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。