首页 > web前端 > js教程 > 正文

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

霞舞
发布: 2024-12-08 16:33:14
转载
682人浏览过

使用 vitest 进行单元测试:下一代测试框架

为什么选择维泰斯特?

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

安装

  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,体验不同之处!

参考

访问网站
维特

以上就是使用 Vitest 进行单元测试:下一代测试框架的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号