使用 Vitest 进行单元测试：下一代测试框架

# Web 开发 # JavaScript # 软件测试

为何选择 Vitest？

Vitest 的设计充分考虑了现代开发。它脱颖而出的原因如下：

速度

Vitest 以 Vite 为基础，利用其闪电般的热模块替换 (HMR) 和“esbuild”进行捆绑和转译。结果如下：

智能和即时监视模式：仅针对受影响的文件重新运行测试，从而使反馈循环即时完成。

开箱即用的 ESM 支持：现代项目受益于对 ES 模块的直接支持，无需任何黑客攻击。

在性能基准测试中，由于使用了 Vite 的优化构建管道，Vitest 始终以显著的优势超越 Jest。

**注意：**这些基准可能因项目复杂性和系统规格而异。

兼容性

Vitest 与 Jest 兼容，这意味着您只需进行少量更改即可重用大部分现有测试套件。它还支持开箱即用的 TypeScript、JSX 和 ESM 等流行工具。

开发人员体验

与 Vite 的 HMR 集成，实现快速测试迭代。

简单的 API 和配置。

丰富的生态系统和不断增长的社区支持。

---

设置 Vitest

让我们深入了解如何在 TypeScript 项目中设置 Vitest。我们将使用 React 项目进行演示，但 Vue 3 或 Node.js 项目的步骤类似。

安装

确保您已安装 Node.js 和 npm/yarn/pnpm。

安装 Vitest 及其对等依赖项：

`npm install --save-dev vitest`

对于使用 React 的项目，您还需要 React 测试库：

`npm install --save-dev @testing-library/react @testing-library/jest-dom`

配置

创建或更新你的 `vite.config.ts` 以启用 Vitest：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

添加安装文件

设置文件用于配置测试环境。创建一个 `test/setup.ts` 文件：

`导入'@testing-library/jest-dom';`

添加脚本

更新你的 `package.json` 以包含测试脚本：

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

---

使用 Vitest 编写单元测试

Vitest 提供了类似 Jest 的 API，使编写测试变得简单。这是一个简单的例子：

示例：React 组件

假设你有一个 React 组件：

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC = ({ name }) => {
  return Hello, {name}!;
};

编写测试

为组件创建测试文件：

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render();
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

运行测试

使用以下方法运行测试：

`npm 运行测试`

您将看到类似如下的输出：

`✓ 问候组件呈现正确的问候语`

---

高级功能

嘲讽

Vitest 直接支持模拟模块和功能：

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

快照测试

快照测试非常简单：

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render();
  expect(container).toMatchSnapshot();
});

性能测试

使用 Vitest 的 CLI 选项来测量性能：

`vitest--run--coverage`

---

结论

Vitest 是现代测试的绝佳选择，它由 Vite 提供支持，速度快、简单易用且功能丰富。无论是从 Jest 迁移还是从头开始，Vitest 都能提供出色的开发人员体验，并确保您的测试运行速度与代码一样快。

在您的下一个项目中尝试 Vitest 并体验其不同之处！

参考

维特斯网站

维特

CLIS.CC