各サービスの概要と目的

どうもKashimaです。

coverage、jest-html-reporterを組み合わせて、UTを実行し、レポートを生成する方法を紹介。

UTフェーズで非技術者のお客様からテスト結果を求められた場合に有用な手段となると思いますので参考にしてみてネ

なお、この記事では状態管理やhooks、matcherなどreactおよびjestに関する具体的な記法については取り上げません。

それぞれのサービスと概要については以下の通り

上記を使うとどんなメリットとデメリットがあるのでしょう？

メリット

• 視覚的に整理されたHTML形式のレポートでテスト結果を確認できるため、非技術者でも理解しやすい
• テスト結果をそのままPDFやファイルとして共有することで、プロジェクトの品質保証や納品時のエビデンスとして活用可能
• 技術的なCLIログではなく、わかりやすい数値やグラフ、色分けされたレポートにより、専門用語に頼らず視覚的に伝えられるため、言語や技術知識に依存しない

デメリット

• jestの学習コストがかかる（スナップショットテスト、モック化、非同期処理のテスト）。チーム内で記法やフレームワーク特有のテストの手法について学習する必要がある。
• プロジェクトの仕様変更に伴い、テストケースやスナップショットの更新が必要となるため、テストコードの保守に工数がかかる
• 手動テストはその場で予期せぬ動作やエッジケースを確認するのに適しているが、自動テストでは事前に用意したケースしかカバーできないため柔軟性がやや低め

なんだかんだ一長一短ですね、でもこういった手段があるというのを知っているだけでお客様に対しての提案カードになると個人的に思います。

Reactアプリの作成とライブラリのインストール

1.前提

1. Node.jsとnpm/yarnがインストール済み。
2. Reactアプリのベース (create-react-app や Vite など) が準備されている。

2.先にjest-html-reporterをインストールしとく。

テストカバレッジレポートやHTMLレポートを生成するために、以下の依存関係をインストールします。

とりあえず脳死で入れといて大丈夫です

npm install --save-dev jest-html-reporters

3.とりあえずjest動くか見とく

npm test

多分こんな感じの結果がターミナル上で表示されます

 PASS  src/App.test.js
  ✓ renders learn react link (16 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.917 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

coverageレポート

1.まずはcoverageの出力を得るためにpackage.jsonを修正します。

{
  "name": "blog2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --coverage --watchAll=false", // ここにcoverage用のスクリプトを設定
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.1.0",
    "jest-html-reporters": "^3.1.7"
  }
}

これにより改めてnpm testを行うと

 PASS  src/App.test.js
  ✓ renders learn react link (13 ms)

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |    8.33 |        0 |   33.33 |    8.33 |                   
 App.js             |     100 |      100 |     100 |     100 |                   
 index.js           |       0 |      100 |     100 |       0 | 7-17              
 reportWebVitals.js |       0 |        0 |       0 |       0 | 1-8               
--------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.668 s
Ran all test suites.

ソースコードのカバー率をCLI上で出力してくれます

2.ここでルートディレクトリ上にcoverageという新たなディレクトリが出来上がっているはず。

Icov-reportの中のindex.htmlをGoogleChromeとかにドラッグ&ドロップして確認してみます。

こんな感じのcoverageレポートがhtmlで生成されました。

プロジェクトを立ち上げたのみのファイルなので極端ですが、App.jsのcoverageが100%になっていることがわかります。

このようにソースコードの中身がどれだけテストとして網羅されたのか一目見てわかるわけですね。

テストしてないコードがあればこれを見てわかるんですわ

jest-html-reporter

このコマンドでhtmlを生成します

npx jest --reporters=default --reporters=jest-html-reporters

するとjest_html_reporters.htmlが生成されるので確認すると

こういった形でhtmlを生成してくれます。create-react-appしただけの画面のレポートなのでどのようなテストを行なったかわかりにくいですが、テストのカバレッジ、失敗したテストケース、各テストの実行状況など、詳細な情報をレポートとして確認できます。

最後に

このようにCoverageとHTMLレポートを併用することで

• お客様にとってわかりやすい証跡を残すことができる
• ソースコードの品質を保ち、テスト漏れを防ぐことができる
• テスト結果をわかりやすく可視化し、開発の透明性を高めることができる

こんな感じでいいことの方が多いのかなと思います。

Jest自体の学習コストや柔軟性においてのデメリットもあるのでうまく使い分けていけると良いですね