如何在 Nuxt 3 中使用 vitest 为组件编写单元测试？答案

【问题标题】：How to write unit test for components with vitest in Nuxt 3?如何在 Nuxt 3 中使用 vitest 为组件编写单元测试？
【发布时间】：2022-06-14 01:46:35
【问题描述】：

我正在尝试从 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"
  }
}

我不知道我做错了什么。任何帮助将不胜感激。

这里是reproduction link

【问题讨论】：

@tony19 是的，我尝试在我的项目中添加一个vite.config 文件并在其中使用@vitejs/plugin-vue，但它没有奏效。我也尝试在nuxt.config 文件中添加 vite 配置，但它也不起作用。
@tony19 这里是复制链接：stackblitz.com/edit/…

标签： unit-testing nuxt.js vuejs3 nuxtjs3 vitest

【解决方案1】：

我也在为此苦苦挣扎，并且能够通过使用仅适用于 Vitest 的自定义 Vite 配置文件使其工作。

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

【讨论】：