JestからVitestへ移行・導入について

ツール導入前の課題

私たちのメインプロダクトのフロントエンド開発環境は、 Create-React-App (CRA) ベースで約6年運用してきました。 しかし、CRAはすでにメンテナンスされておらず、周辺ライブラリの更新も難しい状況です。そこで基盤刷新の一環として Vite への移行を決定し、同時にテストランナーも Jest → Vitest へ切り替えることになりました。

どのような状態を目指していたか

• 既存のテストコードを流用して、JestからVitestへの移行が完了している。
• プロダクト開発を滞らせることなく移行を完了し、開発メンバーが即座にテストコードを書ける。

• 既存アプリケーションとの親和性
• 導入コスト
• 学習コスト

• ViteとVitestの親和性が高いこと
• Jestからの移行が公式でサポートされていること
• 多くのWebアプリケーションで利用実績があること

改善したかった課題はどれくらい解決されたか

モダンなライブラリを選択したことにより、一定のメンテナンスコストが下がりました。 CRAも剥がすことができ、Vite+Vitestという一貫性のある開発環境になりました。

どのような成果が得られたか

ビルドツールであるViteと親和性が高いこともあり、両者のライブラリアップデートのコストなどが下がりました。 また、Vitest Browser Modeなどの活用を検討しており、よりモダンな技術にチャレンジしやすくなりました。

• 対象ファイルが膨大（200+）
• モジュールモックや非同期処理など、マイグレーションガイドだけでは解決しない変更箇所
• 変化し続けるアプリケーションコードとの兼ね合い

テストランナーとして、スタンダードな位置にあるので、多くを語ることはありませんが、Jestからの移行であれば、公式、非公式問わず、様々な知見がありますので、AIを使った移行作業などの相性も良いと感じました。

弊社では実際にAIを活用して置き換えました。そちらにご興味のある方はZennに投稿しておりますので、ぜひご覧ください。

https://zenn.dev/lincwell_inc/articles/3bb6a8a33de14d

• VitestBrowserModeなどを活用し、インタラクションテストが作れるようにできないか検討しています。