テスト実行環境をVitestに移行 #78
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #78 +/- ##
===========================================
- Coverage 69.41% 11.67% -57.74%
===========================================
Files 18 68 +50
Lines 85 2090 +2005
Branches 10 69 +59
===========================================
+ Hits 59 244 +185
- Misses 26 1796 +1770
- Partials 0 50 +50 ☔ View full report in Codecov by Sentry. |
| vitest.config.mts | ||
| vitest.setup.mts |
There was a problem hiding this comment.
.mts のファイルをESLintにかけるとエラーになるのでESLintの対象外にした。（設定ファイルの為だけに .mts をESLintで利用出来るようにするのはコストが高いと判断）
| @@ -41,6 +41,7 @@ | |||
| }, | |||
| "devDependencies": { | |||
| "@ianvs/prettier-plugin-sort-imports": "^4.1.1", | |||
| "@next/env": "^14.1.0", | |||
There was a problem hiding this comment.
以前は next/jest を使っていたので環境変数をテスト内でも利用出来ていたがVitestになった事でそれがなくなったので @next/env を追加
| @@ -50,29 +51,31 @@ | |||
| "@storybook/nextjs": "^7.6.6", | |||
| "@storybook/react": "^7.6.6", | |||
| "@storybook/testing-library": "^0.2.2", | |||
| "@testing-library/jest-dom": "^6.1.5", | |||
| "@testing-library/jest-dom": "^6.2.1", | |||
There was a problem hiding this comment.
@testing-library/jest-dom は名前的にJest専用に見えるがVitestでも利用出来る。
これがあると toBeInTheDocument のような便利なカスタムマッチャーが利用出来るので引き続きこれを利用する。
| "@testing-library/react": "^14.1.2", | ||
| "@types/uuid": "^9.0.7", | ||
| "@typescript-eslint/eslint-plugin": "^6.15.0", | ||
| "@vitejs/plugin-react-swc": "^3.5.0", |
There was a problem hiding this comment.
@vitejs/plugin-react-swc これは少しでもテスト実行時のBuild時間を短縮する為に追加。
| "@testing-library/react": "^14.1.2", | ||
| "@types/uuid": "^9.0.7", | ||
| "@typescript-eslint/eslint-plugin": "^6.15.0", | ||
| "@vitejs/plugin-react-swc": "^3.5.0", | ||
| "@vitest/coverage-v8": "^1.2.1", |
There was a problem hiding this comment.
@vitest/coverage-v8 コードカバレッジを出力する為に追加。
| "jest": "29.7.0", | ||
| "jest-environment-jsdom": "29.7.0", | ||
| "eslint-plugin-vitest": "^0.3.20", | ||
| "jsdom": "^24.0.0", |
There was a problem hiding this comment.
happy-dom という次世代のライブラリが出ていますが以下のようにまだ一部問題があるので今回は定番の jsdom を利用。
| "msw": "^2.0.11", | ||
| "msw-storybook-addon": "^2.0.0--canary.122.b3ed3b1.0", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^3.1.1", | ||
| "storybook": "^7.6.6", | ||
| "whatwg-fetch": "^3.6.20" | ||
| "vite-tsconfig-paths": "^4.3.1", |
There was a problem hiding this comment.
vite-tsconfig-paths は tsconfig.json のパスを vitest.config.mts に設定する為に追加。
| @@ -1,6 +1,7 @@ | |||
| import '@testing-library/jest-dom/vitest'; | |||
There was a problem hiding this comment.
@testing-library/jest-dom/vitest は vitest.setup.mts に記載されているのでここに書く必要はないがIDE上で型エラーになってしまうのでここに追加。
| root: './', | ||
| environment: 'jsdom', | ||
| setupFiles: ['./vitest.setup.mts'], | ||
| reporters: ['default', 'hanging-process'], |
There was a problem hiding this comment.
hanging-process はStreamingのテストが途中でハングアップしてしまう場合があるのでデバッグ用に追加。
issueURL
#77
この PR で対応する範囲 / この PR で対応しない範囲
#77 の完了の定義に記載されている通りテストの実行環境をVitestに移行する。
Storybook の URL、 スクリーンショット
変更点概要
テスト実行環境をVitestに移行。Jest周りのpackageや設定ファイルは全て削除。
基本的には以下の内容を確認しながら対応を実施したがテストコードにはあまり変更する箇所はなかった。
https://blog.stackademic.com/migration-from-jest-to-vitest-is-it-worth-it-react-ts-4ce220f6bfcf
また以下の記事も参考にさせて頂いた。
コードカバレッジがかなり低下してるがこれは、
coverage.excludeの設定が上手く動作していないのが原因。ここは別のPRで最適な設定を探す予定。
Vitestに変更した事でJestで発生していたJestのプロセスが終了しない問題は解決済。
レビュアーに重点的にチェックして欲しい点
特になし。
補足情報
インラインコメントに記載。