使用 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 项目的步骤类似。

安装

1. 确保安装了 node.js 和 npm/yarn/pnpm。
2. 安装 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 组件：

// src/components/greeting.tsx import react from 'react';  type greetingprops = {   name: string; };  export const greeting: react.fc<greetingprops> = ({ name }) => {   return <h1>hello, {name}!</h1>; }; 

编写测试

为组件创建测试文件：

// 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(<greeting name="vitest" />);     expect(screen.getbytext('hello, vitest!')).tobeinthedocument();   }); }); 

运行测试

使用以下命令运行测试：
npm 运行测试

您将看到与此类似的输出：
✓ greeting 组件渲染正确的问候语

—

高级功能

嘲笑

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(<Greeting name="Vitest" />);   expect(container).toMatchSnapshot(); }); 

性能测试

使用 vitest 的 cli 选项来衡量性能：
vitest –run –coverage

—

结论

vitest 是现代测试的一个引人注目的选择，它提供由 vite 提供支持的速度、简单性和丰富的功能。无论是从 jest 迁移还是重新开始，vitest 都能提供出色的开发人员体验，并确保您的测试与代码一样快地运行。

在您的下一个项目中尝试 vitest，体验不同之处！

参考

访问网站
维特