在项目中集成Vitest

Dependence

以React项目为例，需要安装jsdom, @testing-library/react用于模拟浏览器环境和组件渲染

npm install --save-dev vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom

如果需要生成覆盖率报告，还需要安装v8

npm install --save-dev @vitest/coverage-v8

配置

在项目根目录创建vitest.setup.ts文件，引入@testing-library/jest-dom用于扩展expect语法:

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest"

afterEach(() => {
  cleanup();
})

在项目根目录创建vitest.config.ts文件，Vitest的配置比Jest要简单得多，只需要指定环境和一些基础的路径映射即可：

import { defineConfig } from 'vitest/config'
import { URL, fileURLToPath } from "node:url";

export default defineConfig({
   test: {
    environment: "jsdom",
    include: ["src/**/*.{test,spec}.{ts,tsx}"],
    // 这里指定源码别名
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      setupFiles: ["./vitest.setup.ts"],
      include: ["src/**/*.{ts,tsx}"],
      exclude: [
        "src/**/*.test.{ts,tsx}",
        "src/**/*.stories.{ts,tsx}",
        "src/**/*.d.ts",
        "src/main.tsx",
        "src/vite-env.d.ts",
      ],
    },
  },
})

如果你的项目使用vite作为构建工具，也可以将vitest的配置集成至vite.config.ts中：

// 顶部引入vitest的ts声明文件
/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { URL, fileURLToPath } from "node:url";

const sourceDir = fileURLToPath(new URL("./src", import.meta.url));

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": sourceDir,
    },
  },
  test: {
    environment: "jsdom",
    include: ["src/**/*.{test,spec}.{ts,tsx}"],
    alias: {
      "@": sourceDir,
    },
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      include: ["src/**/*.{ts,tsx}"],
      setupFiles: ["./vitest.setup.ts"],
      exclude: [
        "src/**/*.test.{ts,tsx}",
        "src/**/*.stories.{ts,tsx}",
        "src/**/*.d.ts",
        "src/main.tsx",
        "src/vite-env.d.ts",
      ],
    },
  },
});