Is there an example of Vitest with Nuxt3 and using .vue components?

[jasondonnellya]

Tried running this:

import { mount } from '@vue/test-utils'
import { it } from 'vitest'
import Container from './Container.vue'

it('should work', (ctx) => {
  // prints name of the test
  const container = mount(Container)
  console.log(ctx.meta.name)
})

And get this error:

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38724:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38720:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:56837:22
 ❯ async Object.transform node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38961:30
 ❯ async doTransform node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:55918:29

In nuxt.config.ts I tried setting this up as with the @vitejs/plugin-vue and doesn't work:

import { defineNuxtConfig } from 'nuxt'
import vue from '@vitejs/plugin-vue'

export default defineNuxtConfig({
...

  /**
   * Vite Proxy
   * (https://vitejs.dev/config/#server-proxy)
   */
  vite: {
    server: {
      proxy: {
        '/uploads': `${process.env.API_URL}`
      }
    },
    test: {
      plugins: [vue()]
    }
  }
})

But it doesn't seem to make a difference.

[sheremet-va]

You can see the example in their docs: https://v3.nuxtjs.org/guide/going-further/testing/

Maybe we will add a Nuxt example in Vitest, PR welcome!

[sheremet-va]

If you want to do unit testing, you will need to recreate your setup inside vitest.config.ts, because Vitest doesn't read nuxt config.

[jasondonnellya]

Thanks, very fast response!

For anyone else looking at this I saw

Create vitest.config.ts, which will have the higher priority and will override the configuration from vite.config.ts
https://vitest.dev/config/

And for some reason I assumed it would override my other vite settings in the nuxt.config.ts.

Have this now in vitest.config.js and the error is gone:

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  test: {
    plugins: [
      vue()
    ]
  },
})

Getting this error now but not sure if it's related to this or if I should create an issue. Not really sure where to look:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Vitest caught 1 unhandled error during the test run. This might cause false positive tests.
Please, resolve all the errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯DataCloneError: handleHotUpdate(ctx) {
      if (!filter(ctx.file)) {
        return;
      }
      return handleHotUpdate(ctx, options);
    } could not be cloned.
 ❯ WorkerInfo.postTask ../../../../file:/G:/Projects/site/nuxt/node_modules/tinypool/dist/esm/index.js:400:17
 ❯ ThreadPool.runTask ../../../../file:/G:/Projects/site/nuxt/node_modules/tinypool/dist/esm/index.js:675:16        
 ❯ Tinypool.run ../../../../file:/G:/Projects/site/nuxt/node_modules/tinypool/dist/esm/index.js:717:38
 ❯ ../../../../file:/G:/Projects/site/nuxt/node_modules/vitest/dist/chunk-vite-node-externalize.35ad761d.js:8235:20 
 ❯ Object.runTests ../../../../file:/G:/Projects/site/nuxt/node_modules/vitest/dist/chunk-vite-node-externalize.35ad761d.js:8226:31
 ❯ ../../../../file:/G:/Projects/site/nuxt/node_modules/vitest/dist/chunk-vite-node-externalize.35ad761d.js:10427:25 ❯ Vitest.runFiles ../../../../file:/G:/Projects/site/nuxt/node_modules/vitest/dist/chunk-vite-node-externalize.35ad761d.js:10434:7
 ❯ processTicksAndRejections ../../../../node:internal/process/task_queues:96:5
 ❯ async Vitest.start ../../../../file:/G:/Projects/site/nuxt/node_modules/vitest/dist/chunk-vite-node-externalize.35ad761d.js:10364:5

[sheremet-va]

This should override you Vite config, yes. If you already have config, you might want to put it there.

Also, test doesn't have plugins entry. This is Vite transform functionality, so you need to put it on the top level.

[jasondonnellya]

Apologies, all fixed now! Thanks for the clarifications.