Migrating from nuxt-vitest

[danielroe]

If you previously used nuxt-vitest, we have now merged it into @nuxt/test-utils, as well as implementing a range of fixes. Here are the required steps:

1. Uninstall nuxt-vitest, update your vitest versions to v1, and update @nuxt/test-utils and vitest-environment-nuxt to the alpha versions:

     "devDependencies": {
   -   "@nuxt/test-utils": "^3.8.1",
   +   "@nuxt/test-utils": "^3.9.0-alpha.1",
   -   "@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-alpha.1"
     },

2. Update your nuxt.config if you have added the nuxt-vitest module to it:

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

3. Update any imports from nuxt-vitest and vitest-environment-nuxt:

   -  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'

4. 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.

If you encounter any problems with this upgrade path, please let us know by raising an issue. 🙏

---

📖 You can read more in this draft documentation: nuxt/nuxt#24658.

[Laurelin]

After looking through the thread again, I tried to update vitest, though it isn't listed in outdated.

appears that @nuxt/devtools is behind on updating the vite-plugin-vue-inspector. Not sure if that's related, but.

➜ npm update vitest
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: vite-plugin-vue-inspector@3.7.2
npm WARN Found: vite@5.0.8
npm WARN node_modules/vite
npm WARN   peer vite@"*" from @nuxt/devtools@0.5.5
npm WARN   node_modules/@nuxt/devtools
npm WARN     dev @nuxt/devtools@"^0.5.5" from the root project
npm WARN   13 more (@nuxt/devtools-kit, @nuxt/test-utils, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer vite@"^3.0.0-0 || ^4.0.0-0" from vite-plugin-vue-inspector@3.7.2
npm WARN node_modules/@nuxt/devtools/node_modules/vite-plugin-vue-inspector
npm WARN   vite-plugin-vue-inspector@"^3.4.2" from @nuxt/devtools@0.5.5
npm WARN   node_modules/@nuxt/devtools
npm WARN 
npm WARN Conflicting peer dependency: vite@4.5.1
npm WARN node_modules/vite
npm WARN   peer vite@"^3.0.0-0 || ^4.0.0-0" from vite-plugin-vue-inspector@3.7.2
npm WARN   node_modules/@nuxt/devtools/node_modules/vite-plugin-vue-inspector
npm WARN     vite-plugin-vue-inspector@"^3.4.2" from @nuxt/devtools@0.5.5
npm WARN     node_modules/@nuxt/devtools

up to date, audited 1800 packages in 3s

422 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[muffincode]

I tried to update as suggested but I get this error

$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: visibility@undefined
npm ERR! Found: @nuxt/test-utils@3.8.1
npm ERR! node_modules/@nuxt/test-utils
npm ERR!   dev @nuxt/test-utils@"^3.9.0-alpha.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @nuxt/test-utils@"^3.9.0-alpha.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vitest@1.0.4
npm ERR! node_modules/vitest
npm ERR!   peer vitest@"^1.0.0" from @vitest/ui@1.0.4
npm ERR!   node_modules/@vitest/ui
npm ERR!     peerOptional @vitest/ui@"^0.33.0 || ^0.34.6 || ^1.0.0" from @nuxt/test-utils@3.9.0-alpha.1
npm ERR!     node_modules/@nuxt/test-utils
npm ERR!       dev @nuxt/test-utils@"^3.9.0-alpha.1" from the root project
npm ERR!     peerOptional @vitest/ui@"^1.0.0" from vitest@1.0.4
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

package.json (relevant packages only)

"devDependencies": {
    "@nuxt/test-utils": "^3.9.0-alpha.1",
    "nuxt": "3.7.4",
    "vitest": "^1.0.4",
    "vitest-environment-nuxt": "^1.0.0-alpha.1",
  }

vitest.config.mjs

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

export default defineVitestConfig({
test: {
  globals: true,
  environment: 'nuxt',
  server: {
    deps: {
      inline: ['vuetify'],
    },
  },
},
})

And nuxt.config.ts

  modules: [
    '@nuxt/test-utils/module',

What am I missing? (I tried to remove the node_modules folder to reinstall but it doesn't seem to help)

[danielroe]

@muffincode It looks like vitest wants @vitest/ui installed as a peer dep. You can also run npm i --legacy-peer-deps.

[danielroe]

This is now released, with a migration guide in https://github.com/nuxt/test-utils/releases/tag/v3.9.0.

Many thanks for all your help testing this ❤️

Please do continue to raise issues! 🙏