Nuxt•2w ago

Vitest Won't Parse Vue Files

I'm getting this error when trying to execute a test. Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. I installed @vitejs/plugin-vue to my dev dependencies, but it's still gives me the same error. On top of that, when running the app in dev mode, it has no problem parsing the app.vue file.

3 Replies

kapa.ai•2w ago

Hi @CLarsen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you’re seeing—

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

—typically means that Vitest is not configured to use the Vue plugin when running tests, even if you have installed @vitejs/plugin-vue. To resolve this, you need to ensure that your vitest.config.ts (or vitest.config.js) explicitly includes the Vue plugin. Here’s how you should set it up:

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

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
});

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

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
});

This configuration tells Vitest to use the Vue plugin when running tests, which is necessary for parsing .vue files. Simply installing the plugin is not enough; it must be registered in your config file. If you follow these steps and still encounter the error, double-check that: - You are running Vitest using the correct config file. - There are no typos in your config. - The plugin is listed in the plugins array as shown above. This setup is directly recommended in the Nuxt documentation for using @vue/test-utils with Vitest in Nuxt projects Unit Testing with @vue/test-utils. Running the app in dev mode works because Nuxt’s dev server already includes the necessary plugins for Vue files, but your test runner needs its own configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@606883289378324512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CLarsenOP•2w ago

Since the bot gave a really bad answer, I'd like to know if any human beings can please give me a good answer. Nevermind. Found out that the test file belonged in test/nuxt and not test/unit.

Gaming

Programming

Vitest Won't Parse Vue Files

Did you find this page helpful?