Next.js 12.1 x jest x vanilla-extract でハマったこと

TL;DR

Next.jsのドキュメントをちゃんと読んで設定を書くこと。next/jest は swc でビルドできるプロジェクト向け

構成

• Next.js 12.1
• jest
• React Testing Library
• vanilla-extract

起きたこと

vanilla-extract の styleVariants を使ったコンポーネントのテストが、以下のようなエラーを吐いて失敗する。

TypeError: Cannot read properties of undefined (reading 'primary')

調べたこと

• React Testing Library の screen.debug 関数を呼び出してみると、vanilla-extract が出力するはずのクラス名が undefined になっている
• console.log を仕込んだ結果、どうやら jest から @vanilla-extract/babel-plugin が呼ばれていない
  • こいつは *.css.ts ファイルを読み込んでクラス名を生成したりする babel plugin
• jest --verbose で jest の実行時の設定を確認してみる
  • jest --verbose hoge のように存在しないテストケース名を与えるとテストが実施されずに早い
• ただの好奇心から Next.js 12.1 から導入された next/jest を使っていたので、いろいろ設定が追加されている
• transform にも予め設定があり、自分で用意した transform の設定がその後に追加されていた
  • それもそのはず、jest.config.js では最後に next/jest から生成した関数で設定をwrapしてるのでそうなる
• おそらく同一ファイルに transform は二重にかからず、自分の設定が無視されていて、結果 vanilla-extract の babel plugin が呼ばれない雰囲気が漂う
  • 改めて調べると Jestの設定 - transform に A transformer is only run once per file unless the file has changed. とある
• そこで試しに next/jest をやめたら、あっさりスタイルは生成されるようになった
• さらに Next.js のドキュメントをよく読むと、 Setting up Jest (with Babel) があり、next/jest を使わないならマニュアルで設定を書けとある。ドキュメントをちゃんと読もう！

If you opt-out of the Rust Compiler, you will need to manually configure Jest and install babel-jest and identity-obj-proxy in addition to the packages above.

とあるものの、babel-jest は jest インストール時に同梱されてくるので、改めてインストールする必要はなさそう。

最終的な jest.config.js はこれで十分でした。

/** @type {import('@jest/types').Config.InitialOptions} */
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  transform: {
    "\\.js$": "babel-jest",
    "\\.tsx?$": ["babel-jest", { configFile: "./.babelrc" }],
  },
  testEnvironment: "jest-environment-jsdom",
};

module.exports = customJestConfig;

（js に対する transform 設定は、単に babel.setup.js で import 文を書き直したくなかっただけのためのもの）

おわりに

ビジュアルレグレッションテストをするわけではない場合には、本来スタイル生成はテストに不要なはずなので、テストを速くするにはテスト実行時に影響する styleVariants API を避けないといけないのか…という悩みがうまれました。