VitestでReact Compilerを有効にしてテストを実行する

公式ドキュメントに書いてある設定を vitest.config.js に追加したらいい。

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

記事に書くにあたって留意点とかあるかなと思ったけど全くなかったので、この記事はこれで終わりです。コンポーネントの単体テストを書いておくだけで、React Compilerでうまく動作しない箇所が洗い出されるので非常に便利。

---

話は変わるけど、Server Component自体のテストってまだE2Eでやるしかないんでしょうか? テストしたいロジックを抽出したりClient Componentとして分割したりするのは当然やっているけど、単体テストを気軽に書きづらいのはいまいちだと思う。