项目中 Vitest 配置详解：vitest.config.ts

概述

项目的测试框架 Vitest 的配置文件。它定义了如何运行测试、使用哪些插件以及测试环境的设置等。

复制代码

import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";

const pathResolve = (dir: string) => resolve(__dirname, ".", dir);

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": pathResolve("src"),
      "@build": pathResolve("build")
    }
  },
  test: {
    environment: "happy-dom",
    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
    setupFiles: ["src/__tests__/setup.ts"],
    globals: true
  }
});

代码解析

让我们逐行分析文件：

typescript 复制代码

import { defineConfig } from "vitest/config";

导入 Vitest 的配置函数，用于定义配置对象。

typescript 复制代码

import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

导入 Vite 的 Vue 插件，分别用于处理 Vue 单文件组件和 JSX 语法。

typescript 复制代码

import { resolve } from "path";

导入 Node.js compress.ts模块，用于处理文件路径。

typescript 复制代码

const pathResolve = (dir: string) => resolve(__dirname, ".", dir);

定义一个辅助函数，用于将相对路径转换为绝对路径。__dirname 指向当前文件所在目录，即项目根目录。

typescript 复制代码

export default defineConfig({

导出函数包装的配置对象。

插件配置部分

typescript 复制代码

  plugins: [vue(), vueJsx()],

配置 Vite 插件，使 Vitest 能够处理 Vue 单文件组件和 JSX 语法。这与项目开发时使用的插件保持一致，确保测试环境与开发环境的一致性。

别名配置部分

typescript 复制代码

  resolve: {
    alias: {
      "@": pathResolve("src"),
      "@build": pathResolve("build")
    }
  },

配置模块解析别名，允许在代码中使用 @ 代替 src 目录路径，使用 @build 代替 build 目录路径，这与开发环境的配置保持一致。

测试配置部分

typescript 复制代码

  test: {

开始定义测试相关的配置。

typescript 复制代码

    environment: "happy-dom",

设置测试环境为\node_modules\happy-dom)，这是一个轻量级的 DOM 实现，用于模拟浏览器环境，相比 jsdom]node_modules\jsdom) 性能更好。

typescript 复制代码

    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],

指定要包含在测试中的文件模式，匹配 src\components\ReCropper\src\index.tsx 目录下所有以 .test.ts 或 .test.tsx 结尾的文件。

typescript 复制代码

    setupFiles: ["src/__tests__/setup.ts"],

指定在运行任何测试之前需要先执行的设置文件，用于初始化测试环境。在项目中，src_tests_\setup.ts) 文件包含了一些必要的 Mock 设置，例如模拟 $echarts$ 、ReIcon 钩子函数、HTTP 请求等。

typescript 复制代码

    globals: true

启用全局测试 API，允许在不显式导入的情况下使用 Vitest 的全局函数，如等。

typescript 复制代码

  }
});

结束配置对象的定义。