为什么选择维泰斯特？
vitest 的设计考虑了现代开发。这就是它脱颖而出的原因：
速度
vitest 以 vite 作为基础，利用其闪电般快速的热模块替换 (hmr) 和 esbuild 进行捆绑和转译。结果是：
智能即时监视模式：仅针对受影响的文件重新运行测试，从而实现即时反馈循环。开箱即用的 esm 支持：现代项目受益于对 es 模块的直接支持，无需破解。
在性能基准测试中，由于使用了 vite 优化的构建管道，vitest 始终大幅领先 jest。
jest~8 secondsvitest~3 secondsmocha~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.tsximport react from 'react';type greetingprops = { name: string;};export const greeting: react.fc = ({ name }) => { return hello, {name}!
;};
编写测试
为组件创建测试文件：
// src/components/__tests__/greeting.test.tsximport { 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 运行测试
您将看到与此类似的输出：
✓ 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(); expect(container).toMatchSnapshot();});
性能测试
使用 vitest 的 cli 选项来衡量性能：
vitest –run –coverage
—
结论
vitest 是现代测试的一个引人注目的选择，它提供由 vite 提供支持的速度、简单性和丰富的功能。无论是从 jest 迁移还是重新开始，vitest 都能提供出色的开发人员体验，并确保您的测试与代码一样快地运行。
在您的下一个项目中尝试 vitest，体验不同之处！
参考
访问网站
维特
以上就是使用 Vitest 进行单元测试：下一代测试框架的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499241.html
微信扫一扫 
支付宝扫一扫 
