Как написать модульный тест для компонентов с помощью vitest в Nuxt 3?

Question

Я пытаюсь перейти с Vue 3 на Nuxt 3. Я написал модульные тесты для своих компонентов, используя vitest, которые отлично работают в моем приложении Vue , но тот же тест в приложении Nuxt дает мне следующую ошибку:

Ошибка: не удалось проанализировать источник для анализа импорта, поскольку содержимое содержит недопустимый синтаксис JS.
Установите @vitejs/plugin-vue для обработки файлов .vue.

я установил @vitejs/plugin-vueкак зависимость развития, но ничего не произошло.

Вот пример моих тестовых файлов:

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

Вот мой 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"
  }
}

Я понятия не имею, что я делаю неправильно. Любая помощь будет оценена по достоинству.

Answer 1

Я тоже боролся с этим и смог заставить его работать, используя настраиваемый файл конфигурации Vite только для Vitest.

package.jsonфайл :

      {
  "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файл :

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

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