Viteで作成したreact-tsプロジェクトにテストを導入したい

どうせならesbuild, swc, Vitestあたりが使いたい。

esbuild-jestは更新が2021/3で止まっている。
https://github.com/aelbore/esbuild-jest

そのせいか、Jest v27だと動かない。Jest v26にすると動いた。

import Reactは明示的に書く必要がある（＝New JSX Transformは使えない： https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html）。
import ReactするとTypeScriptが使っていないと指摘してくるが、tsconfigでreact-jsxではなくreactを選べば良い。

CSS Modulesは使えない。import svgもできないので、プロジェクト作成時に入っている行は削除する必要がある。

hiterm

swcの場合。
https://github.com/swc-project/jest

Jest v27でも動く。
CSS Modulesとimport svgが使えないのは一緒。

以下の設定を入れると、import Reactなしでも動く。

          transform: {
            react: {
              // 必須。省略すると "ReferenceError: React is not defined" が発生します
              runtime: "automatic",
            },
          },

hiterm

https://vitest.dev/

@testing-library/reactを使う方法は、以下を参考にする。

@testing-library/reactを使うには、vite.config.tsで、以下の設定が必須。

export default defineConfig({
  plugins: [react()],
  test: {
    global: true,
    environment: 'jsdom',
  },
})

expect等はtsserver上ではjestのものを使っていることになっているが、実行時にはVitest由来のものが使われるらしい。動くが気持ち悪い。

CSS Modulesも、import svgも使える。

transform周りの設定が要らないのは楽。

hiterm

現段階だとswcかVitestが有力か。

Viteではないが、https://github.com/htlsne/web-ext-react-template に導入するならswcか。しかしesbuildで作っているのにテストはswcというのもどうなのか…。