Vitest

Vitest 是一个现代的 JavaScript/TypeScript 测试框架，它是基于 Vite 构建的，专为现代前端开发而设计。Vitest 目标是提供快速、可靠的测试工具，特别适用于使用 Vite 构建的应用程序。Vitest 兼容 Jest 的大多数 API，并且集成了 Vite 的构建工具，因此具有非常快的启动和测试执行速度。

Vitest 的主要特点：

1. 快速的执行速度： 由于 Vitest 是基于 Vite 的，它具有超快的启动和热更新速度。Vite 本身使用了现代构建工具（如 ESBuild）来加速打包和构建，因此 Vitest 在执行测试时非常高效。
2. 支持 TypeScript： Vitest 支持 TypeScript 测试文件，可以直接运行 .ts 或 .tsx 文件，无需额外的配置。
3. 兼容 Jest API： Vitest 提供了与 Jest 类似的 API，使得从 Jest 迁移过来的开发者几乎无需重新学习测试语法。比如，describe、it、expect 等语法都和 Jest 一样。
4. 内置的断言库： Vitest 内置了断言库，因此无需额外安装任何第三方库。它默认支持常用的断言，如 expect、toBe、toEqual 等。
5. 易于集成： Vitest 可以与 Vite 项目无缝集成，同时也支持其他工具和框架的配置，比如 Vue、React 等。它提供了自动化的配置和插件支持。
6. 模拟（Mocking）支持： Vitest 提供了强大的模拟功能，可以模拟函数、模块等行为，方便测试时控制依赖的行为。
7. 集成测试与单元测试： Vitest 可以用于进行单元测试、集成测试，甚至端到端的测试，支持异步操作、并发执行等多种复杂场景。

Vitest 安装和使用示例：

1. 安装 Vitest

你可以通过 npm 或 yarn 安装 Vitest。

npm install --save-dev vitest

或者使用 yarn：

yarn add --dev vitest

2. 配置 vitest

在 package.json 中添加测试脚本来运行 Vitest：

{
  "scripts": {
    "test": "vitest"
  }
}

3. 编写测试文件

Vitest 支持编写简单的测试文件。例如，创建一个名为 sum.test.ts 的文件，内容如下：

// sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// sum.test.ts
import { sum } from './sum';

describe('sum', () => {
  it('should add two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('should handle negative numbers', () => {
    expect(sum(-1, 2)).toBe(1);
  });
});

4. 运行测试

通过下面的命令运行测试：

npm run test

Vitest 会自动运行所有匹配 .test.ts 或 .spec.ts 后缀的文件，执行测试并显示结果。

5. 支持的 API 和功能

Vitest 提供了类似于 Jest 的 API，例如：

• describe：组织测试用例。
• it：定义具体的测试。
• expect：定义断言。
• beforeAll / beforeEach：在每个测试开始前运行的钩子。
• afterAll / afterEach：在每个测试结束后运行的钩子。

例如：

describe('MyComponent', () => {
  it('should render correctly', () => {
    const result = renderMyComponent();
    expect(result).toMatchSnapshot();
  });
});

适合使用 Vitest 的场景：

• Vite 项目：如果你的项目已经在使用 Vite 构建工具，Vitest 可以无缝集成，利用 Vite 的速度和优化。
• TypeScript 项目：Vitest 直接支持 TypeScript，无需额外配置。
• 快速的测试执行：如果你希望测试快速反馈，Vitest 的速度优势会非常明显。
• 现代前端框架：适用于 Vue 3、React、Svelte 等现代前端框架的测试。