Jest で落ちたアサーションを GitHub のアノテーションに出す

最近 GitHub Actions を弄くり倒すことにハマっていて、 GitHub の Checks API を利用して annotation を出すおもてなしをすることだけが生きがいだと思って生活していました。

そんな中、JavaScript (TypeScript) のコードのテストでよく使われている Jest で、どの assertion が落ちているかを annotation で分かりやすく表示したいと思っていました。自作で頑張ろうかな～と思って調べていると、 Jest 28.0.0 （2022年4月末ごろリリース）から Github Actions で annotation を出す reporter 機能が組み込まれていたという事実を知りました。

jestjs.io

この便利機能が思ったより世の中で使われていない感じがしたので紹介します。

サンプル

こちらをどうぞ：

github.com

CI で動かしているテストが落ちたとき、アサーションを満たしていないところを以下のように表示してくれます。

fail test sample by Arthur1 · Pull Request #1 · Arthur1/jest-github-actions-report-sample · GitHub

やり方

本当に簡単です。

jest を v28.0.0 以上にアップデートする
jest.config.js に以下のような編集を加える
GitHub Actions 上で jest を実行する（オプションなどは不要）

/** @type {import('jest').Config} */
const config = {
  testEnvironment: "node",
  roots: ["<rootDir>/src"],
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)",
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  reporters: ["default", "github-actions"], // <- この行を足す
};

module.exports = config;

ドキュメントのリンクも残しておきます。

jestjs.io

感想

最近の GitHub は PR の差分外についた annotation も表示する（ベータ版機能）ので、落ちているテストを放置する運用をしていると annotation だらけになって厳しいかもしれません。まあそんな形骸化したテストを CI で動かす必要はないでしょうし、これが問題になることはないでしょう。

（というより、これができないと、テストコードを編集していない時にが落ちるとアノテーションが出なくなってしまう。ベータ版じゃなくなると良いですね。）

（そしてガッツリ TDD している場合はどうなるんだろう。）

あと assertion と annotation の区別は寝起きの IQ1 の頭脳にはつらいですね。