Comment écrire des tests unitaires de composants en utilisant Vitest dans Nuxt 3 ?

Question

J'essaie de migrer de Vue 3 vers Nuxt 3. J'ai écrit des tests unitaires pour mes composants en utilisant Vitest et ces tests fonctionnent correctement dans mon application Vue, mais les mêmes tests dans l'application Nuxt donnent l'erreur suivante :

Erreur : la source ne peut pas être analysée pour l'analyse d'importation car le contenu contient une syntaxe JS non valide.

Installez @vitejs/plugin-vue pour gérer les fichiers .vue.

J'ai installé

en tant que dépendance de développement mais rien ne se passe. @vitejs/plugin-vue

Voici un exemple de mon fichier de test :

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");
  });
});

Voici mon

fichier : package.json

{
  "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"
  }
}

Je ne sais pas ce que j’ai fait de mal. Toute aide serait grandement appréciée.

Voici le lien de copie

Answer 1

J'ai également eu ce problème et j'ai pu le faire fonctionner en utilisant simplement un profil Vite personnalisé de Vitest.

package.json Fichier :

{
  "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 Fichier :

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

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