How to write unit test for components with vitest in Nuxt 3?

Question

I'm trying to migrate from Vue 3 to Nuxt 3. I've written unit tests for my components using vitest which are working fine in my Vue app, but the same test in the Nuxt app give me the following error:

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

I've installed @vitejs/plugin-vue as a development dependency but nothing happened.

Here is an example of my test files:

import { describe, it, expect } from "vitest";

import { mount } from "@vue/test-utils";
import AtomsButton from "./AtomsButton.vue";

describe("AtomsButton", () => {
  it("button renders properly", () => {
    const wrapper = mount(AtomsButton, { slots: { default: "Button" } });
    expect(wrapper.html()).toContain("Button");
  });
});

Here is my package.json file:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "test:unit": "vitest --environment jsdom"
  },
  "devDependencies": {
    "@nuxt/test-utils-edge": "^3.0.0-rc.3-27571095.9379606",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/test-utils": "^2.0.0",
    "jsdom": "^19.0.0",
    "nuxt": "3.0.0-rc.3",
    "vitest": "^0.13.1"
  }
}

I have no idea what am I doing wrong. Any help would be appreciated.

Here is the reproduction link

Answer 1

I was struggling with this too and was able to make it work by using a custom Vite config file only for Vitest.

package.json file :

{
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "test:unit": "vitest --config ./vitest.config.js",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^5.1.2",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/test-utils": "^2.0.0",
    "jsdom": "^19.0.0",
    "nuxt": "3.0.0-rc.4",
    "vitest": "^0.14.2"
  }
}

vitest.config.js file :

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
}