强烈推荐这个新一代的测试框架！

大家好，我是「前端实验室」爱分享的了不起~

作为经验丰富的前端，经常用console.log测试代码，但是log对复杂的功能来说还是不能满足需求，所以今天就给大家介绍一款目前最为流行的测试框架——Vitest

Vitest

Vitest 是由 Vite 驱动的下一代测试框架。

它旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。

特点

• 与 Vite 通用的配置、转换器、解析器和插件。
• 使用与你的应用相同的设置来运行测试！
• 智能文件监听模式，就像是测试的 HMR！
• 支持对 Vue、React、Svelte、Lit等框架进行组件测试。
• 开箱即用的 TypeScript / JSX 支持
• ESM 优先，支持模块顶级 await
• 通过 Tinypool 使用 Worker 线程尽可能多地并发运行
• 使用 Tinybench 来支持基准测试
• 套件和测试的过滤、超时、并发配置
• 支持 Workspace
• Jest 的快照功能
• 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API
• 内置用于对象模拟(Mock)的 Tinyspy
• 使用 jsdom 或 happy-dom 用于 DOM 模拟
• 通过 v8 or istanbul来输出代码测试覆盖率
• 类似于 Rust 语言的 源码内联测试
• 通过 expect-type 进行类型测试

使用

可以在 StackBlitz 上在线尝试 Vitest 。它直接在浏览器中运行 Vitest，它几乎与本地设置相同，但不需要在你的计算机上安装任何东西。

本地安装

使用npm安装

npm install -D vitest

测试用例

创建一个js文件

// sum.js
export function sum(a, b) {
  return a + b
}

创建 .test.js文件用来编写测试用例

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

为了执行测试，请将以下部分添加到你的 package.json 文件中：

{
  "scripts": {
    "test": "vitest"
  }
}

最后，运行 npm run test

Vitest UI

Vitest 由 Vite 提供能力，在运行测试时有一个开发服务器。这允许 Vitest 提供一个漂亮的 UI 界面来查看并与测试交互。

npm i -D @vitest/ui

启动测试的 UI 界面：

vitest --ui

可以访问 Vitest UI 界面，通过 http://localhost:51204/__vitest__/