为什么选择维泰斯特？
vitest 的设计考虑了现代开发。这就是它脱颖而出的原因：
速度
vitest 以 vite 作为基础，利用其闪电般快速的热模块替换 (hmr) 和 esbuild 进行捆绑和转译。结果是：
- 智能即时监视模式：仅针对受影响的文件重新运行测试，从而实现即时反馈循环。
- 开箱即用的 esm 支持：现代项目受益于对 es 模块的直接支持，无需破解。
在性能基准测试中，由于使用了 vite 优化的构建管道，vitest 始终大幅领先 jest。
| framework | time to run 500 tests |
|---|---|
| jest | ~8 seconds |
| vitest | ~3 seconds |
| mocha | ~6 seconds |
注意：这些基准可能会根据项目复杂性和系统规格而有所不同。
兼容性
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 组件：
// 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，体验不同之处！
参考
访问网站
维特
