Vitest 前端测试实战从第一个测试到覆盖率接入 CI只需这 4 步【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest改了一行逻辑跑测试终端第一遍初始化就花掉 20 秒结果出来时思路早就断了。CI 里更夸张一次全量测试要等 4 分钟每次合代码都得干等。吃时间的不是测试本身而是测试工具维护了一条和你项目构建分开的转换管道。Vitest 前端测试解决的就是这件事测试不再走第二套构建配置而是直接复用你已经在用的 Vite 转换管道装完就能跑。它到底在做什么测试跑在你的构建同一条管道上把 Vitest 理解成Vite 开发服务器 测试执行器比较好。测试启动时它不会预编译整个项目而是让测试真正 import 到的那些模块走进 Vite 的转换管道按需转换、按需缓存。启动快是因为上次已经转换缓存过的模块直接复用改一个模块只重跑依赖它的测试是因为 Vitest 能从模块图上追出依赖关系——这正是 Vitest 前端测试快在工程上的原因。和 Jest 这类先做整体转换再执行的工具比差别不在谁更聪明而在后者要提前支付一遍完整的转换成本。如果你的项目本来就基于 Vite连vite.config.ts里的 alias、插件都能直接复用不必再养一份测试专用配置。从安装到第一个绿勾装、配、写、跑四步走 ✏️装。一行命令的事npm install -D vitest配。只需在package.json的 scripts 里加一条test: vitest run。配置文件可以先不建默认就会收集所有**/*.{test,spec}.?匹配的文件。写。建一个sum.test.ts内容就这么几行import { expect, test } from vitest test(1 2 3, () { expect(1 2).toBe(3) })跑。npm test之后你大概率会看到RUN v5.0.0 /path/to/project ✓ test/sum.test.ts (1 test) 5ms ✓ 1 2 3 Test Files 1 passed (1) Tests 1 passed (1) Duration 380ms想边改边测直接敲vitest进入 watch 模式文件一变就自动重跑相关测试日常大概率用到的三件事Mock 依赖、接覆盖率、环境隔离 Mock 外部依赖。测试不想真发请求时vi.mock按模块路径整体替换它会被 Vitest 自动提升到文件顶部写在 import 之后也能生效import { vi, expect, test } from vitest import { load } from ./user.js vi.mock(./api.js, () ({ getUser: () Promise.resolve({ id: 1 }) })) test(loads the mocked user, async () { expect(await load()).toEqual({ id: 1 }) }) 默认配置下每个测试开始前会清空 mock 状态多数场景不用手动管理。用法细节看 docs/guide/mocking.md。覆盖率接进 CI。装个 provider跑测试时加个参数npm install -D vitest/coverage-v8 npx vitest run --coverage报告默认落在./coverage/。在 CI 里 Vitest 还会自动输出 job summaryPR 页面直接能看到通过/失败统计和 flaky 测试清单比翻日志快得多配置项参考 docs/guide/coverage.md多环境隔离。默认环境是node个别需要 DOM 的文件在文件头写一行vitest-environment jsdom注释即可单独切换不用动全局配置其余文件继续跑在 node 里。新手最常碰上的两个报错以及怎么修 ⚠️document is not defined。原因一句话默认环境是 nodenode 里没有 DOM。个别文件用上面的文件头注释解决整个项目是前端的直接在配置文件里写死import { defineConfig } from vitest/config export default defineConfig({ test: { environment: jsdom } })记得把jsdom本身装上当依赖。某个第三方 ESM 包报转换或互操作错误。通常是 Node 侧无法直接消费那个纯 ESM 依赖。把它加进deps.optimizer.client.include让 Vite 先打包一层再喂给测试就行完整配置项在 docs/config/index.md 都能查到。前端项目想快速把测试跑起来Vitest 基本是即装即用如果你重度依赖某些 Jest 生态插件动手前先看一遍兼容性。接下来建议翻 docs/config/index.md 过一遍配置项从 Jest 迁过来的话先把 docs/guide/migration.md 读掉。【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vitest 前端测试实战：从第一个测试到覆盖率接入 CI，只需这 4 步
Vitest 前端测试实战从第一个测试到覆盖率接入 CI只需这 4 步【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest改了一行逻辑跑测试终端第一遍初始化就花掉 20 秒结果出来时思路早就断了。CI 里更夸张一次全量测试要等 4 分钟每次合代码都得干等。吃时间的不是测试本身而是测试工具维护了一条和你项目构建分开的转换管道。Vitest 前端测试解决的就是这件事测试不再走第二套构建配置而是直接复用你已经在用的 Vite 转换管道装完就能跑。它到底在做什么测试跑在你的构建同一条管道上把 Vitest 理解成Vite 开发服务器 测试执行器比较好。测试启动时它不会预编译整个项目而是让测试真正 import 到的那些模块走进 Vite 的转换管道按需转换、按需缓存。启动快是因为上次已经转换缓存过的模块直接复用改一个模块只重跑依赖它的测试是因为 Vitest 能从模块图上追出依赖关系——这正是 Vitest 前端测试快在工程上的原因。和 Jest 这类先做整体转换再执行的工具比差别不在谁更聪明而在后者要提前支付一遍完整的转换成本。如果你的项目本来就基于 Vite连vite.config.ts里的 alias、插件都能直接复用不必再养一份测试专用配置。从安装到第一个绿勾装、配、写、跑四步走 ✏️装。一行命令的事npm install -D vitest配。只需在package.json的 scripts 里加一条test: vitest run。配置文件可以先不建默认就会收集所有**/*.{test,spec}.?匹配的文件。写。建一个sum.test.ts内容就这么几行import { expect, test } from vitest test(1 2 3, () { expect(1 2).toBe(3) })跑。npm test之后你大概率会看到RUN v5.0.0 /path/to/project ✓ test/sum.test.ts (1 test) 5ms ✓ 1 2 3 Test Files 1 passed (1) Tests 1 passed (1) Duration 380ms想边改边测直接敲vitest进入 watch 模式文件一变就自动重跑相关测试日常大概率用到的三件事Mock 依赖、接覆盖率、环境隔离 Mock 外部依赖。测试不想真发请求时vi.mock按模块路径整体替换它会被 Vitest 自动提升到文件顶部写在 import 之后也能生效import { vi, expect, test } from vitest import { load } from ./user.js vi.mock(./api.js, () ({ getUser: () Promise.resolve({ id: 1 }) })) test(loads the mocked user, async () { expect(await load()).toEqual({ id: 1 }) }) 默认配置下每个测试开始前会清空 mock 状态多数场景不用手动管理。用法细节看 docs/guide/mocking.md。覆盖率接进 CI。装个 provider跑测试时加个参数npm install -D vitest/coverage-v8 npx vitest run --coverage报告默认落在./coverage/。在 CI 里 Vitest 还会自动输出 job summaryPR 页面直接能看到通过/失败统计和 flaky 测试清单比翻日志快得多配置项参考 docs/guide/coverage.md多环境隔离。默认环境是node个别需要 DOM 的文件在文件头写一行vitest-environment jsdom注释即可单独切换不用动全局配置其余文件继续跑在 node 里。新手最常碰上的两个报错以及怎么修 ⚠️document is not defined。原因一句话默认环境是 nodenode 里没有 DOM。个别文件用上面的文件头注释解决整个项目是前端的直接在配置文件里写死import { defineConfig } from vitest/config export default defineConfig({ test: { environment: jsdom } })记得把jsdom本身装上当依赖。某个第三方 ESM 包报转换或互操作错误。通常是 Node 侧无法直接消费那个纯 ESM 依赖。把它加进deps.optimizer.client.include让 Vite 先打包一层再喂给测试就行完整配置项在 docs/config/index.md 都能查到。前端项目想快速把测试跑起来Vitest 基本是即装即用如果你重度依赖某些 Jest 生态插件动手前先看一遍兼容性。接下来建议翻 docs/config/index.md 过一遍配置项从 Jest 迁过来的话先把 docs/guide/migration.md 读掉。【免费下载链接】vitestNext generation testing framework powered by Vite.项目地址: https://gitcode.com/GitHub_Trending/vi/vitest创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考