nuxt-vitestからnuxt/test-utilsに移行してみた

これまで主にDaniel Roe氏によって、nuxt-vitestというNuxt向けのモジュールが開発されていました。nuxt-vitestは、Nuxtランタイムを必要としたテストをVitestで実行させることができるものです。
// public archived
https://github.com/danielroe/nuxt-vitest

めでたいことに、v3.9.0のタイミングでnuxt-vitestとvitest-environment-nuxtが@nuxt/test-utilsに統合されました。🎉

今回は、nuxt-vitestを使用していたプロジェクトにて、nuxt/test-utilsに移行したときにやったことについてまとめます。

以下のリリースノートを参考に移行しました。
https://github.com/nuxt/test-utils/releases/tag/v3.9.0

nuxt-vitestをuninstall

npm remove nuxt-vitest

各ライブラリをアップデートする

vitestを1系にアップデートし、@nuxt/test-utilsとvitest-environment-nuxtを最新にします。(記事執筆時点で@nuxt/test-utilsは3.11が最新)

// 以下の差分は最新ではありません。Release当時の差分です。
  "devDependencies": {
-   "@nuxt/test-utils": "^3.8.1",
+   "@nuxt/test-utils": "^3.9.0",
-   "@vitest/coverage-v8": "0.33.0",
+   "@vitest/coverage-v8": "^1.0.4",
    "@vue/test-utils": "^2.4.3",
-   "nuxt-vitest": "^0.11.5",
-   "vitest": "^0.33.0",
+   "vitest": "^1.0.4",
+   "vitest-environment-nuxt": "^1.0.0"
  },

nuxt.configを修正

nuxt-vitestだった箇所をnuxt/test-utilsにします。

  export default defineNuxtConfig({
   modules: [
-    'nuxt-vitest'
+    '@nuxt/test-utils/module'
   ],
-  vitest: {}
+  testUtils: {}
  })

import箇所をnuxt-vitestから置き換える

自分は以下の変更のみで済みました。

- import { defineVitestConfig } from 'nuxt-vitest/config'
+ import { defineVitestConfig } from '@nuxt/test-utils/config'

Release noteには以下のガイドが書かれていました。
環境によってはこちらの変更が必要になるかもしれません。

-  import { mountSuspended } from 'nuxt-vitest/utils' // or 'vitest-environment-nuxt/utils'
+  import { mountSuspended } from '@nuxt/test-utils/runtime'

-  import { defineVitestConfig } from 'vitest-environment-nuxt/config' // or 'nuxt-vitest/config'
+  import { defineVitestConfig } from '@nuxt/test-utils/config'

-  import { setup, $fetch } from '@nuxt/test-utils'
+  import { setup, $fetch } from '@nuxt/test-utils/e2e'

おわりに

以上で移行完了です！
最後に気をつけるとしたら、vitestがモジュールコンテキストで動いているかどうか確認してください、、↓

Ensure vitest is running in a module context (either by checking you have type: 'module' set in your package.json, or by renaming your vitest.config file to vitest.config.mts or vitest.config.mjs.

自分は一度も詰まることなく、スムーズに移行できました 🎉
当時の喜びツイート
https://twitter.com/Kspace_trk/status/1739619932223193250
https://twitter.com/Kspace_trk/status/1739631941459263763