はじめに

皆さんはJestの実行結果の表示をいい感じに出したい！と思ったことはありませんか？
デフォルトだと下記のような感じで結果を見せてくれますが、これだと自分が見る分には十分なんだけどちょっと無骨な印象もあります。

# ここら辺にテストファイルのパスと結果

Test Suites: 9 passed, 9 total
Tests:       119 passed, 119 total
Snapshots:   0 total
Time:        2.466 s, estimated 12 s
Ran all test suites matching /date/i.

後はテストを通っているならともかく、エラーが多いとかなり見にくくなってしまいます。~~そもそもエラー出すな~~

後から結果を見返す時とか、プログラマじゃない人にもこんな感じでテストしてますよ～って見せる時を考えるとやっぱり何とかしたいです。
何より綺麗にテスト結果が見えたら良い気分になりますよね！

ここまでで「いや別に？」って思った方も居ると思いますが、まあこんなのもあるんだ程度で見てくれればと思います。

結論

自力で作ることも一手なのですが、既にあるのならばそれを利用するのが手っ取り早いです。
ということで探してみたのですが、ちょうど求めているものがありました。
それがjest-html-reportersです。
これを使うとJestの実行結果がHTMLで出力され、ブラウザ上で綺麗に表示される優れものです。

使い方は簡単で、上記ライブラリをnpmでも何でもインストールし、後はjestの実行時にオプションを設定する形です。CLIでもconfigファイルでもどちらでもOK。

configファイル(cjsでもtsでもjsonでもお好きなもの)

const config = {
  // --その他諸々の設定--

  // オプション無し
  reporters: [
    'jest-html-reporters'
  ],

  // オプション付き
  reporters: [
    'jest-html-reporters', {
      publicPath: './html-report',
      filename: 'report.html',
      openReport: true
    }
  ]
};

module.exports = config;

CLI

jest --reporters=jest-html-reporters

CLIだと細かなオプション設定は出来ないので、必要な場合はconfigファイルを設定しておいてください。
Jest CLI オプション・Jest --reporters

細かいオプションについては今回は割愛しますが、必要であれば下記を参考にしてみてください。
Available Options
※基本的にはデフォルトのままで事足ります

上記の設定をして実行すると、テスト完了と同時にHTMLファイル(デフォルトではjest_html_reporters.html)およびソースフォルダを吐き出してくれます。

それを開くとどんな感じなのかというとこんな感じ。
※以下画像の黒塗りの部分はテストファイルのパスが表示されているので隠しています

いい感じですね！
各セクションの表示は見た通りですが、下記のような感じです。

Dashboard

全体のテスト結果のサマリーが表示され、いくつのテストに成功・失敗したのかが分かります。

Information

テストファイルそれぞれの実行時間がグラフで表示されており、どれに時間がかかっているのかが一目でわかります。
自動実行する場合の分析に役立てていけそうですね。

Details

各テストファイルごとに、実行結果が詳細に表示されます。
クリックするとさらにファイル内のテストケースごとに結果が見えるようになります。

エラーがあると赤く表示され、「Info」をクリックするとその詳細も見せてくれます。

地味にフィルタしたりソートしたり出来ますし、まさに良い感じに表示してくれます。
HTMLで吐き出してくれるので、ある時点の結果として残しておくこともやりやすくなるというメリットもありますね。
綺麗にPASSされているテスト結果を見て、テンションを上げていきましょう！

終わりに

ということで、今回はjest-html-reportersの紹介となりました。
Jestにはjsonファイルで結果を吐き出すオプションがあるので、それを使って色々と自分でカスタマイズして結果表示することも出来るのですが、既にあるものを使って手っ取り早くやるなら良い選択肢だと思います。
Jestを導入しても面倒くさがって書かないとかだと意味がないのですが、こうやって良い感じにテスト結果を表示させることで、自発的にもっとテストを書きたくなるようにしていきたいですね！