JS 中怎么用 Vitest 代替 Jest 配合 Vite 获得极速测试体验-js教程-PHP中文网

vitest 替代 jest 的核心是删 jest 依赖、复用 vite 配置、沿用相同语法；它复用 vite 处理链，启动快、热更新快、配置少，实测执行时间减少50%以上。

js 中怎么用 vitest 代替 jest 配合 vite 获得极速测试体验

直接用 Vitest 替代 Jest 配合 Vite，核心就三点：删掉 Jest 相关依赖、复用 Vite 配置、沿用熟悉语法。它不是“另一个 Jest”，而是把测试跑在 Vite 的管道里，所以启动快、热更新快、配置少。

为什么 Vitest 能比 Jest 快

Vitest 不自己解析、转译、打包代码，而是完全复用 Vite 的整个处理链——包括 TypeScript 编译、Vue/JSX 解析、插件系统和缓存机制。Jest 则要单独启动 babel 或 ts-jest，重复做一遍类似工作，尤其在大型项目中冷启动明显拖慢节奏。Vitest 还默认启用多线程（tinypool）和原生 ESM 加载，实测多数 Vite 项目单测执行时间能减少 50% 以上。

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

三步完成 Jest → Vitest 迁移

卸载 Jest 及配套：删除 jest、ts-jest、@types/jest、vue-jest 等包；它们对 Vitest 全部不必要
安装 Vitest 核心：运行 npm install -D vitest（或 pnpm/yarn 对应命令）
补一条脚本：在 package.json 的 scripts 中加 "test": "vitest"，再加 "test:ui": "vitest --ui" 和 "coverage": "vitest run --coverage"（可选）

测试文件写法几乎不用改

Vitest 默认导出 describe、it、expect、beforeEach 等 API，和 Jest 完全一致。你原来的 .test.ts 文件基本无需修改：

// math.test.ts

import { add } from './math'<br>
import { expect, test } from 'vitest'<br><br>
test('adds 1 + 2 to equal 3', () => {<br>
  expect(add(1, 2)).toBe(3)<br>
})

进阶优化点（按需启用）

环境切换：默认用 jsdom，如需更贴近真实浏览器行为（比如测试 canvas、getComputedStyle），可换 happy-dom 并在 vitest.config.ts 中配置 environment: 'happy-dom'
UI 调试：运行 npm run test:ui 打开图形界面，支持点击重跑、失败快照对比、测试状态实时刷新
覆盖率：装 @vitest/coverage-c8，执行 npm run coverage 即得 HTML 报告，无需额外配置 Istanbul
组件测试：Vue 项目搭配 @vue/test-utils，React 项目搭配 @testing-library/react，API 和 Jest 生态完全兼容