Bagaimana untuk menulis ujian unit komponen menggunakan vitest dalam Nuxt 3?

Question

Saya cuba berhijrah dari Vue 3 ke Nuxt 3. Saya telah menulis ujian unit untuk komponen saya menggunakan vitest dan ujian ini berfungsi dengan baik dalam aplikasi Vue saya, tetapi ujian yang sama dalam aplikasi Nuxt memberikan ralat berikut:

Ralat: Sumber tidak boleh dihuraikan untuk analisis import kerana kandungan mengandungi sintaks JS yang tidak sah.

Pasang @vitejs/plugin-vue untuk mengendalikan fail .vue.

Saya telah memasang

sebagai pergantungan pembangunan tetapi tiada apa yang berlaku. @vitejs/plugin-vue

Berikut ialah contoh fail ujian saya:

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

Ini ialah fail

saya: 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"
  }
}

Saya tidak tahu apa salah saya. Sebarang bantuan amatlah dihargai.

Ini adalah pautan salinan

Answer 1

Saya juga mengalami masalah ini dan dapat membuatnya berfungsi dengan hanya menggunakan profil Vite tersuai daripada Vitest.

package.json Fail:

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

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

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