★ FEATURED ARTICLE 开头先聊点实在的。我做前端这些年最怕的不是需求改也不是设计稿差几个像素而是接手一段两万行的历史代码改完一个函数压根不知道哪里会跟着炸。直到后来我把单元测试当成项目的一部分而不是某个季度KPI的应付项这种感觉才彻底缓解。前端单元测试这件事绝对不只是给函数写几个断言这么简单——它决定的是你在重构、迭代、多人协作时能不能睡得着觉。这篇文章我想把前端单元测试从选型到落地、从报错到覆盖率完整地拆开讲一遍适合正在准备给项目补测试的同学也适合面试前想把这块知识梳理清楚的人。很多刚开始写测试的朋友总会有个错觉测试是产品做完了以后再补的工作。但恰恰相反前端单元测试真正要解决的是未来半年一年里每一次需求变更和重构带来的焦虑问题。它不是工作量是保险。1. 为什么前端项目越大越离不开单元测试1.1 测试金字塔的第一层单测是性价比最高的兜底做测试绕不开测试金字塔底层是单元测试中间是组件/集成测试顶层是端到端测试E2E。这个金字塔的核心原则就是越往下层跑得越快、维护成本越低、数量越多越往上越贴近真实用户但成本也越高。我见过不少团队上来就砸一堆Cypress/Playwright写E2E点开页面一顿操作结果每次CI跑二十分钟全是超时重试的红色最后没人愿意维护整套测试直接废弃。单元测试恰恰相反它只针对一个函数、一个组件、一个模块做验证。不需要起浏览器、不需要连数据库、不需要等接口。毫秒级反馈跑一千个case也就几秒钟。这决定了它可以高频执行每次保存代码都能跑一遍变成开发流程里的持续体检而不是季度体检。前端项目的痛点往往不是功能做不出来而是改完A把B带炸了。单测对这类回归问题有天然的压制力。你可以想象成把一颗颗螺丝先锁死再动整个机身——每个模块自己站得住组合起来才不会散架。1.2 不是所有代码都值得写测试ROI才是核心什么都要测是刚接触测试的人最容易犯的毛病。我之前见过有人给CSS动画写测试、给一张静态图组件写快照测试纯粹为了覆盖率数字好看。这属于用战术上的勤奋掩盖战略上的懒惰。真正值得写单元测试的代码有三个特征有输入输出逻辑、有分支判断、未来大概率会变化。比如日期格式化、金额转换、权限判断、状态机流转、复杂表单校验。这些代码一旦出bug影响面是成片的而且几乎不可能靠肉眼及时发现。不值得写单测的也很明确一次性脚本、纯展示型组件模板里没有任何业务判断、对第三方SDK的直接封装转发以及那种只是把所有值透传给子组件的粘合层。你非要给这类代码补测试最后只会得到一个极其脆弱的测试子组件一改props父组件的测试先挂修了半天跟业务毫无关系。1.3 单元测试倒逼代码设计这可能是单测最被低估的价值。一个功能模块如果你怎么都测不好十有八九不是测试的写法有问题而是代码本身的结构有问题——全局变量满天飞、隐式依赖太多、函数职责不单一。最常见的例子一个工具函数内部直接用了window.localStorage但测试环境里没有这个API你只能先mock一把window。但如果你把这个函数改造成参数注入formatData(data, storage window.localStorage)测试就变成了传入一个假的storage对象即可同时业务代码也没有变复杂。这种逼你写好代码的效果一旦体验过就很难再退回去写那些耦合到死的函数了。提示判断一个函数测不测得了可以先看它是否足够纯粹。单测友好的核心特征就是输入相同的参数输出一定相同不依赖外部状态。2. 前端单元测试框架选型Vitest与Jest的真实差距2.1 为什么现在选Vitest的人越来越多这两年Vue/React项目里选测试框架Vitest几乎成了新项目的默认选项。说句公道话Jest还是那个很成熟的老大哥生态丰富、资料多、几乎所有概念都有现成方案但它在Vite时代确实显得有点别扭。Jest走的是自己的模块解析和转译体系和Vite的ESM原生路线天然不搭。你一旦在Vite项目里用Jest就得处理TS转译、ESM转换、模块别名一堆配置稍微碰到个带ESM依赖的库就得上transformIgnorePatterns踩一晚上坑。热搜词里的vue单元测试报错有一大半本质都是Jest和Vite之间的水土不服并不是你测试代码写错了。Vitest则天生是为Vite设计的。它直接用Vite的transform和依赖预构建你在vite.config.ts里配置的resolve.alias、define、plugins测试环境天然继承。这意味着测试里的模块解析、TS处理、SCSS处理统统和业务代码用同一套规则心智负担小一大截。而且Vitest的watch模式是真的快——改一行代码只重新跑受影响的测试文件这在开发过程中体验差距极大。2.2 两者选型的具体对比如果你正纠结给你一张我整理过的对比表维度VitestJest原生ESM支持基于Vite支持一般需要额外配置TypeScript开箱即用走esbuild需要ts-jest或babel配置配置复杂度基本零额外配置需要写setup、moduleNameMapper等测试速度快按需更新中等全量跑较多生态成熟度快速增长中非常成熟快照测试支持支持Mock能力vi.mock/vi.fnAPI与Jest接近jest.mock/jest.fn适用场景Vite构建的新项目Webpack老项目、存量Jest库2.3 我的选型建议新项目Vite构建无论是Vue3还是React18以上直接上Vitest。配置简单、速度优势明显社区踩坑经验也已经足够丰富不存在太新不敢用的问题。存量Webpack项目且已有大量Jest测试不建议强行迁移。测试代码的迁移成本远高于框架切换省下的几分钟跑测时间老老实实维持Jest把精力花在补测试覆盖率上。项目同时用Webpack和Vite混编的优先给Vite那部分用Vitest给工具函数库单独建一个Vitest测试环境也算干净。这是纯ViteVitest的最简配置实测一行测试不用改就能跑起来import { describe, it, expect } from vitest describe(formatTime, () { it(应正确格式化分钟数为 HH:mm, () { expect(formatTime(90)).toBe(01:30) }) })核心API上Vitest和Jest几乎一致describe/it/expect、beforeEach/afterEach、vi.fn/vi.mock对应jest.fn/jest.mock从Jest迁到Vitest基本就是改个导入来源。这也是为什么我说它俩选谁不决定你的学习成本只决定你的配置体验和跑测速度。3. 前端单元测试落地从工具函数到组件再到状态3.1 第一阶段工具函数测试先尝到甜头我比较推荐用一个纯工具函数作为团队的第一个测试文件。它不需要理解DOM、不需要Mock接口逻辑直观写好之后价值立竿见影。比如一个日期格式化函数// src/utils/date.ts export function formatTime(totalMinutes: number): string { const hours Math.floor(totalMinutes / 60) const minutes totalMinutes % 60 return ${String(hours).padStart(2, 0)}:${String(minutes).padStart(2, 0)} }对应测试文件import { describe, it, expect } from vitest import { formatTime } from /utils/date describe(formatTime, () { it(转换普通分钟数, () { expect(formatTime(90)).toBe(01:30) }) it(处理跨天的大数值, () { expect(formatTime(1500)).toBe(25:00) }) it(处理0值边界, () { expect(formatTime(0)).toBe(00:00) }) it(补零逻辑验证, () { expect(formatTime(5)).toBe(00:05) }) })这里有个小建议边界值永远是测试的重点。不是测输入90输出01:30就够了你还得测0、负数、非整数、超大值。前端大部分线上事故都出在边界值上日期转换尤其如此。顺着这样的思路写下来你会发现工具函数的测试写得又快又有成就感。再往深一点涉及到对Date.now()、localStorage、window.location这些浏览器API时原则是能注入就注入不能注入再mock。比如上面的formatTime如果依赖Date.now()最好是改成formatTime(totalMinutes, now Date.now())把不确定性挡在函数外面测试只需要传入固定值。3.2 第二阶段Vue组件测试把交互行为和渲染结果锁住工具函数测完之后下一步是组件测试。Vue生态里官方推荐的是vue/test-utils配合Vitest跑单测。组件测试最关键的是搞清楚你测什么测的是组件的输入输出契约而不是实现细节。先看一个例子一个带防抖的搜索输入框组件!-- SearchInput.vue -- template input :valuemodelValue placeholder请输入搜索关键词 inputhandleInput / /template script setup langts import { defineProps, defineEmits } from vue defineProps{ modelValue: string }() const emit defineEmits{ (e: update:modelValue, value: string): void }() let timer: ReturnTypetypeof setTimeout | undefined function handleInput(event: Event) { const value (event.target as HTMLInputElement).value if (timer) clearTimeout(timer) timer setTimeout(() { emit(update:modelValue, value) }, 300) } /script对应测试import { describe, it, expect, beforeEach, vi } from vitest import { mount } from vue/test-utils import SearchInput from /components/SearchInput.vue describe(SearchInput, () { beforeEach(() { vi.useFakeTimers() }) it(输入内容后等待防抖时间才触发 update:modelValue, async () { const wrapper mount(SearchInput, { props: { modelValue: }, }) await wrapper.find(input).setValue(前端单元测试) // 防抖逻辑未到时间不应该触发 expect(wrapper.emitted(update:modelValue)).toBeUndefined() // 快进 300 毫秒 vi.advanceTimersByTime(300) await wrapper.vm.$nextTick() const emitted wrapper.emitted(update:modelValue) expect(emitted).toBeTruthy() expect(emitted![0]).toEqual([前端单元测试]) }) it(高频输入时只触发最后一次, async () { const wrapper mount(SearchInput, { props: { modelValue: }, }) await wrapper.find(input).setValue(前端) await wrapper.find(input).setValue(前端单元) await wrapper.find(input).setValue(前端单元测试) vi.advanceTimersByTime(300) await wrapper.vm.$nextTick() const emitted wrapper.emitted(update:modelValue) expect(emitted).toHaveLength(1) expect(emitted![0]).toEqual([前端单元测试]) }) })这里面有个特别重要的细节防抖逻辑必须借用假时钟。如果你直接await new Promise(resolve setTimeout(resolve, 300))测试单测会多出300毫秒的等待数量一多整个测试套件就慢下来了。vi.useFakeTimers()配合vi.advanceTimersByTime()是组件测试里处理定时器的标准姿势。组件测试还有几个常踩的细节异步更新DOM和组件状态的更新是异步的await wrapper.vm.$nextTick()或flushPromises()不能省。shallowMount还是mountshallowMount会浅渲染把子组件替换成桩组件适合只测当前组件逻辑mount是完整渲染适合验证父子组件交互。默认推荐从shallowMount开始避免子组件抛错干扰判断。事件断言wrapper.emitted(update:modelValue)拿到的是事件触发记录数组用[0]取第一次触发注意第一个元素才是$emit传出的参数数组。3.3 第三阶段Pinia状态管理与接口Mock组件测试跑通之后再往前一步就是涉及接口和全局状态了。项目里的逻辑往往不是纯组件内部状态而是用户操作后调接口、拿数据、写Pinia store、再渲染列表这一条链路才是bug高发区。单测对这一链路的核心策略是把接口这一层挡在外面测试只验证在给定的接口返回值下组件和store的行为是否正确。先看一个请求用户列表的方法用fetch直接请求实际项目中你也可以用axios// src/api/user.ts export async function fetchUsers() { const res await fetch(/api/users) if (!res.ok) throw new Error(Request failed) return res.json() }在测试里我推荐用vi.mock把整个接口模块替换掉而不是去mock全局fetch。这种方式更干净也更贴近测试只关注组件自己的契约的原则import { vi, describe, it, expect, beforeEach } from vitest import { flushPromises, mount } from vue/test-utils import UserList from /components/UserList.vue vi.mock(/api/user, () ({ fetchUsers: vi.fn(() Promise.resolve([ { id: 1, name: 张三 }, { id: 2, name: 李四 }, ]) ), })) import { fetchUsers } from /api/user const mockFetchUsers vi.mocked(fetchUsers) describe(UserList, () { beforeEach(() { mockFetchUsers.mockClear() }) it(挂载后自动加载并渲染用户列表, async () { const wrapper mount(UserList) await flushPromises() expect(wrapper.findAll(.user-item)).toHaveLength(2) expect(wrapper.text()).toContain(张三) expect(wrapper.text()).toContain(李四) }) it(接口失败时展示错误提示, async () { mockFetchUsers.mockRejectedValueOnce(new Error(Network Error)) const wrapper mount(UserList) await flushPromises() expect(wrapper.find(.error-tip).text()).toContain(加载失败) }) })关于接口Mock更成熟的技术方案是MSWMock Service Worker它用一个真正的Service Worker在浏览器网络层拦截请求在Node端也用适配器拦截能同时服务单测、组件测试和E2E代码复用率很高。如果项目里已经有MSW单测里优先考虑MSW如果只是想快速落地vi.mock一个接口模块已经能解决绝大多数问题。Pinia的测试也不复杂。createPinia()创建一个空的store实例在组件挂载时通过global.plugins注入或者用createTestingPinia这个专用工具它对mock store状态有额外支持import { createTestingPinia } from pinia/testing import { mount } from vue/test-utils import UserPanel from /components/UserPanel.vue import { useUserStore } from /stores/user describe(UserPanel, () { it(从store读取用户信息并展示, () { const pinia createTestingPinia({ initialState: { user: { name: 王五, role: admin, }, }, }) const wrapper mount(UserPanel, { global: { plugins: [pinia], }, }) expect(wrapper.find(.user-name).text()).toBe(王五) expect(wrapper.find(.user-role).text()).toBe(admin) }) })到这里一条完整的前端业务逻辑链组件交互-接口-状态-渲染基本都能被自动化测试覆盖住了。4. Vue项目中单测报错的高发区与排查实战搜索引擎相关词vue单元测试报错是个很高频的搜索说明大量团队一开始补测试就被报错劝退了。我在不同项目里踩过很多坑把最有代表性的几类整理出来每一条都附带根因和修复方法照着抄能少走很多弯路。4.1window.matchMedia is not a function其实是UI库暗坑项目里装了Element Plus的el-menu或者Ant Design Vue的响应式组件时非常容易出现这个报错。matchMedia用于媒体查询监听jsdom没有实现它只在访问时直接抛TypeError。测试环境里jsdom是我们的假浏览器但它不是完整的浏览器很多API是缺的。修复方案是在vitest.setup.ts或Jest的setupFiles里补上全局实现// vitest.setup.ts Object.defineProperty(window, matchMedia, { writable: true, value: vi.fn().mockImplementation((query: string) ({ matches: false, media: query, onchange: null, addListener: vi.fn(), removeListener: vi.fn(), addEventListener: vi.fn(), removeEventListener: vi.fn(), dispatchEvent: vi.fn(), })), })4.2ResizeObserver is not defined图表组件是重灾区ECharts、可视化图表、部分自适应组件都会用到ResizeObserver。它同样不在jsdom的实现列表里。报错时机经常是mount一个图表组件时同步触发。修复方案同样在setup文件里class ResizeObserverMock { observe() {} unobserve() {} disconnect() {} } vi.stubGlobal(ResizeObserver, ResizeObserverMock)4.3CSS import cannot be resolved样式和静态资源处理测试组件时组件模板里的style或者import ./xxx.scss会导致Vitest尝试解析CSS。Vite环境下通常在vite.config.ts里配置test: { css: true }或者把样式交给css: false直接忽略。如果遇到的是.vue文件中style块报错优先检查Vitest配置是否继承了Vite的css配置。在Vite构建项目里最省心的做法是// vite.config.ts export default defineConfig({ // ... test: { css: true, environment: jsdom, globals: true, setupFiles: [./vitest.setup.ts], }, })如果项目里有大量SVG或者图片导入还可以在setup里用vi.mock统一处理或者配置alias把静态资源指向一个假模块。4.4 组装了Element Plus等组件库需要挂插件很多人用vue/test-utils挂一个带el-button的组件时报错Failed to resolve component: ElButton。原因是Element Plus组件是全局注册的测试环境里没有显式安装插件。对测试来说最安全的方式是用合成都挂了也就是在mount的时候给global.plugins里推入ElementPlus或者用一个全量导入的包装import ElementPlus from element-plus const wrapper mount(YourComponent, { global: { plugins: [ElementPlus], }, })但全量引入会让单测变慢不少而且把整库都拖进测试环境。更讲究的做法是使用element-plus/test-utils这种按需注册工具但代价是每个组件文件里要自己声明依赖哪些El子组件。项目初期图省事优先全量引入也能接受。4.5Transition警告和计时器问题Transition在测试环境里很讨厌因为jsdom不跑真实动画Vue的transition逻辑会抛出operation not supported或者产生一堆warning。如果只是要测试业务内容最佳做法是把Transition用shallowMount直接桩掉或者挂载时用global.stubs: { transition: false }。另一个问题测试里使用了setTimeout/setInterval但没有用假时钟控制测试会真实等待整个套件越跑越慢。凡是组件里涉及防抖、节流、动画、loading延迟的一律vi.useFakeTimers()配vi.advanceTimersByTime()这会让测试从碰运气变成确定性执行。4.6 异步逻辑的await时机不对这是新手最常见又最难定位的报错类型明明mock了接口但测试断言一直失败。根因往往是组件mount之后onMounted里的异步请求还没resolve你的断言就先跑了。expect(wrapper.text()).toContain(张三)在接口返回之前执行必然拿不到文本。正确姿势是await flushPromises()把微任务队列冲刷干净或者await wrapper.vm.$nextTick()如果还不行就双重nextTickconst wrapper mount(UserList) await flushPromises() // 或者 await wrapper.vm.$nextTick() await wrapper.vm.$nextTick()组件里嵌套了多层Promise时单次nextTick确实不保险flushPromises是较稳的通用方案。注意mock接口时mockResolvedValue和mockResolvedValueOnce很容易混。一次性的用Once默认返回的用常规的而且beforeEach里记得mockClear()否则用例之间会互相污染。5. 覆盖率不应当是KPI而是代码体检报告5.1 覆盖率四指标的真正含义Vitest的覆盖率基于c8或istanbul实现配置很简单// vite.config.ts export default defineConfig({ test: { coverage: { provider: v8, include: [src/**/*.{ts,vue}], exclude: [src/main.ts, src/router/**, src/types/**], reporter: [text, html, json-summary], thresholds: { lines: 60, functions: 60, branches: 50, statements: 60, }, }, }, })四个指标对应四种视角指标含义数值低代表什么Statements每行代码是否执行过大量未覆盖说明基本没测Branches每个if/else、三元、switch分支是否都走分支全走一遍才能防遗漏Functions每个函数是否被调用过函数没跑到说明流程缺失Lines每行可执行代码是否执行和Statements高度相关5.2 不同代码要设置不同的覆盖率目标别对所有代码一视同仁。工具函数、复杂业务逻辑、权限判断这类覆盖越高越好我自己的标准是核心工具库分支覆盖90%以上。UI展示层组件只验证关键的props和emit能到50-60%就不错了。你硬要把一个只有一行按钮的模板补到100%写出来的测试又脆又没有意义。一个更务实的做法是增量约束老代码不追覆盖率新代码尤其是加了git diff触发的CI约束必须有覆盖率门槛。举个例子你可以通过vitest/coverage-v8的thresholds配合all: true来限制整体也可以用脚本对变更文件单独跑覆盖率。5.3 跑覆盖率时怎么看报告覆盖率不只是给CI看的红绿数字。跑一次vitest --coverage之后在coverage/目录下会生成HTML报告里面能看到每个文件的未覆盖行。我惯常的做法是打开几个核心文件逐行看哪些红色行是真正要命的。举个例子一个登录函数里面有个分支if (user.isAdmin) ...一直没测到。点开报告那个红色块直接告诉你管理员的权限分支逻辑从来没被验证过。这种来自报告的体检信号比我对着代码猜哪个分支容易漏测要有用得多。5.4 覆盖率工具的注意项provider: v8比istanbul快很多Node版本新一点的项目优先v8。Vue单文件组件里template部分的覆盖率统计依赖vitest/coverage-v8对.vue的支持想要精确模板覆盖需要额外配插件一般情况不看模板覆盖率把逻辑写进script setup照样能覆盖。覆盖率达到一定阈值后CI里设成不达标就挂才有约束力。否则覆盖率只是开发自嗨项目一忙起来没人管它。6. 把单元测试变成开发流程的一部分而不是额外负担6.1 Watch模式的真实价值边写边测Vitest跑vitest不加参数默认是watch模式。改一个测试文件只重跑这个文件改它依赖的源码关联测试自动跟着跑。这种即时反馈是测试能坚持下来的关键。开发时我的习惯是开两个终端一个跑开发服务器看页面效果一个跑vitest watch盯着核心模块。改工具函数的时候测试文件里立刻闪绿或闪红比手动刷新页面去点验证快太多了。很多前端开发者说写测试耽误时间体验过watch模式的即时反馈之后这个观点很难再站住脚。6.2 把测试挂进CI之前先挂进本地钩子CI是为了防止别人和未来的自己提交有问题的代码。但在公司里CI反馈太慢排队构建测试可能要十几分钟等CI报错再改上下文已经切换走了。更推荐的做法是把核心测试挂到本地lint-staged里提交前只跑受影响文件的测试十几秒就知道有没有问题。// package.json { lint-staged: { src/**/*.{ts,vue}: [ vitest related --run ] } }这样每次git commit都会自动跑一遍当前变更相关的测试。配合husky钩子测试挂了根本提交不上去。它的价值不仅仅是拦截bug而是强制你每次提交都意识到我这次改动的影响范围是什么。6.3 防止测试变成自嗨别断言自己很多新手写的测试断言的是函数确实返回了某个值而这个值是从实现里抄出来的。比如函数写了一行return a b测试就断言expect(add(1, 2)).toBe(3)这里的3是真的业务预期没问题。但如果组件里写死了role admin才显示按钮测试也断言只有当role admin时才显示这个测试是永远通过的复读机一旦产品改成超级管理员也能看到测试不会报警因为断言是从实现抄出来的不是从需求推出来的。写测试的价值观应该是找三条不同的输入路径覆盖多个分支并且断言每个分支下真实的行为结果。你不信自己写的代码才需要测试来证明它是对的。自嗨式断言浪费时间也耗尽了测试的可信度宁可少写几个用例。6.4 一点私人的实操经验最后分享一个我自己的习惯。每次接到新需求我先不急着写业务代码而是先写一个这个需求最关键行为的测试骨架。比如这次要做的是优惠券结算计算那就先把输入输出用测试钉死输入不同优惠类型、不同金额期望得到不同的实付金额。测试先写红再用业务代码把它跑绿。这个方法叫做测试驱动开发TDD听起来很玄学但实际用起来非常舒服。它对业务代码的影响是倒逼你把计算逻辑从组件里抽出来、把分支判断放到纯函数里这样一来组件代码变薄单测好写将来做需求变更也有安全感。如果你正处在一个完全没有测试的项目里别想着一夜之间给所有代码补上先挑一个核心工具函数写起来把测试跑通、跑绿顺便体验一下以后改代码不再提心吊胆的感觉。这种正向循环一旦转起来你就再也不想回到靠肉眼找bug的时代了。
阅读完成 · 觉得有帮助？
