今流行りのテストフレームワークであるVitestをTesting Libraryと併せて使ってみたので導入手順や注意点を記録として残しておきます。
※Vitestのバージョン0.12.4時点の情報です。
セットアップ
必要なライブラリのインストール
yarn add -D vitest jsdom @vitejs/plugin-react @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/testing-library__user-event
カスタムマッチャーの設定
@testing-library/jest-domなどのカスタムマッチャーをグローバルで使えるようにsrcなどのディレクトリの下にtest/setup.tsファイルを作成しjest-domをimportしておきます。
このファイルを後ほどVitestのconfigに追記します。
// src/test/setup.ts
import '@testing-library/jest-dom'
vitest.config.jsの設定
プロジェクトのルートにvitest.config.jsを作成し以下の設定を記述します。
次に設定する時には忘れていそうなのでtestで設定しているオプションについても記載しておきます。他のオプションについてはこちらのページで確認できます。
globals: VitestのAPIをグローバルで使うかどうかを指定。デフォルトはfalse。
environment: DOMの検証に使用するライブラリを指定。現在はjsdomかhappy-domのどちらかを設定できる。
setupFiles: テスト実行前に読み込むファイルを指定。
/// <reference types="vitest" />
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vitest/config'
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts'
}
})
npm scriptsの設定
packge.jsonのscriptsに以下の2行を追記します。
"test": "vitest run",
"coverage": "vitest run --coverage" // テストのカバレッジを取るためのコマンド
ここまで設定したらテストを書きyarn testを実行することでテストが走るはずです。
next-page-testerについて
Next.jsのページ遷移やgetStaticPropsなどのテストをする際に使われるnext-page-testerをvitestに組み込もうとした時このようなエラーに遭遇しました。
Error: [next-page-tester] Failed to load "_document.tsx" file due to SyntaxError: Cannot use import statement outside a module
同じようなイシューがこちらにもありましたが、原因はVitestがESMファーストなライブラリであるため一部CommonJS形式で書かれているnext-page-testerはサポートされていないということのようでした。
next-page-testerの方でもVitestに移行しようとするような動きがありましたが、まだCloseできていないみたいです。
私はとりあえず様子を見つつnext-page-testerを使いたくなったら素直にJestを使おうと思います。
この辺りの解決策など知っている方がいましたら教えていただけると幸いです。
まとめ
シンプルな設定ですぐテストを始められる、Viteで実行されるため高速、ESMファーストで開発されているなどJestと比較してもより多くの恩恵を受けられる良いテストフレームワークだと感じました。
アップデートも頻繁に行われているので今後もキャッチアップしつつテストを導入する際は積極的に使っていきたいです。