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

@tony19 Here is the reproduction link: https://stackblitz.com/edit/github-bhnfe6?file=nuxt.config.ts,app.vue,package.json — mo3n, Jun 05 '22 at 07:12

score 10 · Accepted Answer · answered Jun 13 '22 at 17:46

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

And how to handle the Nuxt 3 auto imports? Because with this config I need to import all the components or Vue dependencies like ref or reactive. — Jonathan Arias, Jul 07 '23 at 02:03

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

1 Answers1