Vite + React + TypeScript + Vitestの環境構築(pnpm)

メモ

メモです。

Viteの導入

$ pnpm create vite

画面表示したがってReactやTypeScriptを選ぶ。+ SWCを選んでも良い。SWCはRust製の高速なバンドラらしい。

Vitestとtesting-libraryの導入

$ pnpm add -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

vitest.config.tsを以下のように書く。

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
  },
});

environmentはjsdomを使うので指定。

globalsはexpectやtestを毎回importしなくて済むように。 また、globalsをtrueにしておくと@testing-library/jest-domをimportするだけで使えるようになる。

ただし、このままだとTypeScriptがexpectやtestで怒り出すのでtsconfig.jsonの"compilerOptions"に

"types": ["vitest/globals"],

を追加しておく。

最後に、package.jsonの"scripts"に"test": "vitest run src"を追加するのを忘れずに。 watchモードがほしければ、"test:watch": "vitest"とでも書いておこう。