これまで主にDaniel Roe氏によって、nuxt-vitestというNuxt向けのモジュールが開発されていました。nuxt-vitestは、Nuxtランタイムを必要としたテストをVitestで実行させることができるものです。
// public archived
めでたいことに、v3.9.0のタイミングでnuxt-vitestとvitest-environment-nuxtが@nuxt/test-utilsに統合されました。🎉
今回は、nuxt-vitestを使用していたプロジェクトにて、nuxt/test-utilsに移行したときにやったことについてまとめます。
以下のリリースノートを参考に移行しました。
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.
自分は一度も詰まることなく、スムーズに移行できました 🎉
当時の喜びツイート
Discussion