3VitesttechはじめにNuxt3のプロジェクトでvitestを使ったユニットテスト環境を実装したので備忘録として記事にします。したメモになりますが、誰かの参考になればと思います。使用したライブラリvitestViteベースの高速なテストランナーhttps://github.com/vitest-dev/vitest@testing-library/vueVue.jsアプリケーション向けのシンプルなテストユーティリティを提供し、DOMに対する操作やアサーションを行う。https://github.com/testing-library/vue-testing-librarynuxt-vitestNuxtでvitestを使用するためのモジュール。https://github.com/danielroe/nuxt-vitesthappy-dom高速な仮想DOM実装で、ブラウザ環境をシミュレートする。https://github.com/capricorn86/happy-dom@vitest/coverage-c8はvitestでコードカバレッジを収集するためのプラグイン。},})非同期setup関数への対応setup関数が非同期で定義されている(トップレベルでawaitを使ってる)場合は解決前に描画され要素が見つからないとエラーが出る。テスト対象のコンポーネントをSuspendでラップすることで回避できるが、コンポーネントによってはなぜかうまくいかない。その場合はawaitを使っている箇所をonBeforeMount内で処理するようにコンポーネント側を修正する。(https://test-utils.vuejs.org/guide/advanced/async-suspense.html#testing-asynchronous-setup)※SuspendはVue公式が実験的な機能と言っている。nuxt-vitestのドキュメントにTODOとしてmountSuspendedの記載があったので今後サポートされるかも。Nuxt環境が必要なテストuseState等のnuxtの固有の機能を使用しているとテスト実行時に未定義エラーがでるので、本来はモックが必要になる。テストのファイル名にhoge.nuxt.test.tsのように.nuxtを入れると、Nuxt環境でテストが実行されuseState等が使える状態でテストが走る。nuxtとコメントを追加することで同じことができる。非同期setup関数への対応Nuxt環境が必要なテストZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。