为什么选择维泰斯特？
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：
1
2
3
4
5
6
7
8
9
10
11
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;添加脚本
1
2
3
4
5
{
"scripts": {
"test": "vitest"
}
}
---
使用 vitest 编写单元测试
vitest 提供了类似 jest 的 api，使编写测试变得简单。这是一个简单的例子：
示例：反应组件
想象你有一个 react 组件：
1
2
3
4
5
6
7
8
9
10
// src/components/greeting.tsx
import react from react;
type greetingprops = {
name: string;
};
export const greeting: react.fc<greetingprops> = ({ name }) => {
return <h1>hello, {name}!</h1>;
};
编写测试
为组件创建测试文件：
1
2
3
4
5
6
7
8
9
10
11
// 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直接支持模拟模块和函数：
1
2
3
4
5
import { vi } from vitest;
const mockfn = vi.fn();
mockfn();
expect(mockfn).tohavebeencalled();
快照测试
快照测试非常简单：
1
2
3
4
5
6
7
8
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，体验不同之处！
参考
访问网站
维特以上就是使用 Vitest 进行单元测试：下一代测试框架的详细内容，更多请关注php中文网其它相关文章！