0. 前言

从本节开始搭建 vitest 测试框架。

1. 基础步骤清单

1. 安装 vitest 依赖：pnpm i vitest -D

2. 配置 vitest.config.ts 文件。

   import { defineConfig } from 'vitest/config';
   
   export default defineConfig({
     test: {
       environment: 'node',
       /* 没有测试也可通过 */   
       passWithNoTests: true,
       /* 过滤文件 */
       exclude: ['**/node_modules/**', '**/dist/**'],
       /* 开启并发线程 */
       threads: true
     }
   });
   

3. 新建 sum 案例：utils/sum.ts 文件

   const sum = (a: number, b: number) => a + b;
   
   export { sum };
   

   接着新建 src/utils/__test__/index.test.ts

   import { expect, test } from "vitest";
   import { sum } from "../sum";
   
   test("add", () => {
     expect(sum(1, 1)).toBe(2);
     /* 生成 __snapshots__ 文件夹 */
     expect(sum(2, 3)).toMatchSnapshot();
     /* 推荐: 内联快照 */
     expect(sum(4, 5)).toMatchInlineSnapshot();
   });
   

4. 添加指令

   {
     "test:init": "vitest run"
   }
   

2. 集成可视化步骤

1. 安装依赖：

   pnpm i @vitest/ui -D
   

2. 添加指令：

   {
     "test:ui": "vitest --ui"
   }
   

3. 查看结果

   

3. 测试覆盖率 coverage 报告

参考：https://cn.vitest.dev/guide/coverage.html

覆盖率提供者

c8 和 istanbul 的支持都是可选的。 默认情况下，启用 c8。

你可以通过将 test.coverage.provider 设置为 c8 或 istanbul 来选择覆盖工具：

// vite.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      provider: 'istanbul', // or 'c8'
    },
  },
})

当你启动 Vitest 进程时，它会提示你自动安装相应的支持包。

或者，如果你更喜欢手动安装它们：

# For c8
npm i -D @vitest/coverage-c8

# For istanbul
npm i -D @vitest/coverage-istanbul

覆盖率配置

要在启用的情况下进行测试，你可以在 CLI 中传递 --coverage 标志。

{
  "scripts": {
    "test:coverage": "vitest run --coverage"
  }
}

要对其进行配置，需要在配置文件中设置 test.coverage 选项：

// vite.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },
})