Vitest 是 Vite 生态的极速单元测试框架API 兼容 Jest上手快、配置简单、性能极高。下面从安装 → 配置 → 编写测试 → 常用断言 → Mock → 组件测试 → 运行与覆盖率完整流程带你上手。一、安装1. 基础安装npmi-Dvitest# 或yarnadd-Dvitestpnpmadd-Dvitest2. 常用依赖按需浏览器环境模拟前端组件/DOM 测试npmi-Djsdom happy-domVue 组件测试npmi-Dvue/test-utilsReact 组件测试npmi-Dtesting-library/react testing-library/jest-dom测试覆盖率npmi-Dvitest/coverage-v8UI 界面npmi-Dvitest/ui二、配置vite.config.ts / vitest.config.tsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],test:{// 全局注入 APIdescribe/it/expect/viglobals:true,// 测试环境node | jsdom | happy-domenvironment:jsdom,// 测试文件匹配规则include:[src/**/*.{test,spec}.{js,ts,jsx,tsx,vue}],// 覆盖率配置coverage:{provider:v8,reporter:[text,json,html],exclude:[node_modules/,dist/,src/main.ts,**/*.d.ts]}}})package.json 脚本{scripts:{test:vitest,// 监听模式开发常用test:run:vitest run,// 单次运行CItest:ui:vitest --ui,// 可视化 UItest:coverage:vitest run --coverage// 覆盖率}}三、编写第一个测试工具函数1. 待测试代码src/utils/math.tsexportfunctionsum(a:number,b:number){returnab}exportfunctiondivide(a:number,b:number){if(b0)thrownewError(除数不能为 0)returna/b}2. 测试文件src/utils/math.test.tsimport{describe,it,expect}fromvitestimport{sum,divide}from./math// 测试套件分组describe(数学工具,(){// 单个测试用例it(sum 123,(){expect(sum(1,2)).toBe(3)})it(sum 负数相加,(){expect(sum(-1,-2)).toBe(-3)})it(divide 正常除法,(){expect(divide(6,2)).toBe(3)})// 测试异常it(divide 除以 0 抛出错误,(){expect(()divide(6,0)).toThrow(除数不能为 0)})})四、常用断言expect// 基础匹配expect(22).toBe(4)// 严格相等expect({a:1}).toEqual({a:1})// 对象深度相等expect(abc).toContain(b)// 包含expect(null).toBeNull()expect(undefined).toBeUndefined()expect(0).toBeFalsy()expect(1).toBeTruthy()// 数字expect(5).toBeGreaterThan(3)expect(5).toBeLessThan(10)// 异常expect(()fn()).toThrow(msg)// 异步awaitexpect(promise).resolves.toBe(ok)awaitexpect(promise).rejects.toThrow(err)五、Mock 模拟vi1. 模拟函数import{vi,it,expect}fromvitestconstmockFnvi.fn()mockFn(a,1)expect(mockFn).toHaveBeenCalled()expect(mockFn).toHaveBeenCalledWith(a,1)expect(mockFn).toHaveBeenCalledTimes(1)// 模拟返回值mockFn.mockReturnValue(42)expect(mockFn()).toBe(42)2. 模拟模块import{vi,it,expect}fromvitestimport{fetchData}from./api// 模拟整个模块vi.mock(./api,()({fetchData:vi.fn().mockResolvedValue({data:mock})}))it(异步测试,async(){constresawaitfetchData()expect(res.data).toBe(mock)expect(fetchData).toHaveBeenCalledOnce()})3. 定时器模拟import{vi,it,expect}fromvitestit(定时器测试,(){vi.useFakeTimers()constfnvi.fn()setTimeout(fn,1000)// 快进时间vi.advanceTimersByTime(1000)expect(fn).toHaveBeenCalled()vi.useRealTimers()})六、Vue 组件测试示例组件src/components/Counter.vuetemplate div pcount: {{ count }}/p button clickincrement1/button /div /template script setup import { ref } from vue const count ref(0) const increment () count.value /script测试Counter.test.tsimport{describe,it,expect}fromvitestimport{mount}fromvue/test-utilsimportCounterfrom./Counter.vuedescribe(Counter 组件,(){it(初始 count 为 0,(){constwrappermount(Counter)expect(wrapper.text()).toContain(count: 0)})it(点击按钮 count 1,async(){constwrappermount(Counter)awaitwrapper.find(button).trigger(click)expect(wrapper.text()).toContain(count: 1)})})七、运行测试# 监听模式修改文件自动重测npmtest# 单次运行npmrun test:run# 可视化 UI浏览器查看npmrun test:ui# 覆盖率报告生成 coverage/ 目录npmrun test:coverage八、最佳实践测试文件命名xxx.test.ts/xxx.spec.ts结构describe分组 →it/test用例 →expect断言隔离每个用例独立用beforeEach/afterEach重置状态测行为不测实现测输出/交互不测内部变量覆盖率核心逻辑 ≥ 80%不盲目追求 100%