前端测试完全入门指南（新手秒懂：单元/组件/集成/E2E\+AI写测试提示词）

最新推荐文章于 2026-09-11 21:31:59 发布

原创最新推荐文章于 2026-09-11 21:31:59 发布 · 184 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端学习

前言

很多前端新手对测试的认知只有一句话：听说有 vitest、有 E2E，但完全分不清、不知道什么时候用、为什么用。接下来我就来详细讲一下这几个东西

前端测试一共有4种

从最小代码片段 →完整用户操作，层级如下：

单元测试 Unit Test：测函数、纯逻辑
组件测试 Component Test：测 UI 组件渲染、样式、文本
集成测试 Integration Test：测多个组件/状态/hooks 配合工作
E2E 端到端测试：模拟真实用户在浏览器点点点

前三者全部属于 Vitest / Jest 范畴
最后一个属于 Playwright / Cypress 范畴

1. 单元测试（最小、最快、最常用）

测什么？

只测纯函数、工具方法，和页面、DOM、接口无关。
例如：金额计算、日期格式化、数据过滤、数字校验。

核心特点

不依赖浏览器
不依赖接口
速度极快（毫秒级）
输入固定 = 输出固定

你的记账项目举例

写一个计算结余的函数：收入 - 支出

单元测试：输入 1000、-200，断言结果 800

什么时候写？

所有 utils 工具函数、公共逻辑，必须写单元测试

2. 组件测试（前端最核心的测试）

测什么？

测 UI 组件渲染是否正确

单个组件独立渲染，传入 props，判断：

文字对不对
颜色类名对不对
loading 状态是否展示
空数据是否展示空状态

核心特点

✅ 运行在 jsdom 模拟 DOM（不是真实浏览器）
✅ 网络请求全部 mock（不会真发请求）
✅ 只测当前组件，不测父组件

什么时候写？

通用组件、业务核心组件必须写组件测试

3. 集成测试（多个模块配合）

测什么？

不再测单个东西，测「组合工作」

比如：父组件 + 子组件 + hook + 状态联动是否正常。

特点

比组件测试更宏观
依然是 jsdom 模拟环境，无真实浏览器
依然 mock 接口

什么时候写？

核心业务页面、多组件联动页面

4. E2E 端到端测试（用户视角）

完全模拟真实用户、真实浏览器、真实操作

不管你代码怎么写，只看用户能不能用。

可以模拟

点击展开、收起
输入表单、提交
下拉刷新、路由跳转
接口真实请求

核心特点（和 Vitest 最大区别）

✅ 启动真实浏览器
✅ 真实网络请求
✅ 最慢、最重量级
✅ 测完整业务流程

工具

Playwright（现在行业主流）、Cypress

四大测试一句话极简总结（背诵版）

单元测试：测函数、测逻辑（Vitest）
组件测试：测组件渲染、样式、文本（Vitest）
集成测试：测组件+状态+hook 联动（Vitest）
E2E：测用户真实操作、完整页面流程（Playwright）

5. 前端测试金字塔（行业标准比例）

从上到下：越上层越少、越下层越多

E2E 10%（慢、贵、少写）
集成测试 20%
单元+组件测试 70%（快、便宜、多写）

新手误区：误以为测试就是 E2E，其实 E2E 写得最少。

6. Vitest 和 E2E 终极区分（新手必记）

Vitest 做的事：

代码层面、组件层面、逻辑层面，不打开真浏览器、不做真实用户操作。

E2E 做的事：

页面层面、业务流程层面，真浏览器、真点击、真请求。

7. 项目落地：哪些写、哪些不写？

必须写 Vitest

所有工具函数
自定义 hooks（useRequest 等）
通用 UI 组件

可选写 E2E

核心业务主流程
上线不能崩的关键页面

不用写测试

纯样式页面、排版页面
一次性临时页面
简单业务页面

8. AI 赋能前端测试

现在前端工程化开发，90% 的测试用例都可以让 AI 生成。
但新手最大问题：不会写提示词，导致 AI 写出的测试乱七八糟、无法运行、不符合规范。这里分享下我平时用的吧

一、AI 写测试的核心原则（必须告诉 AI）

使用 Vitest + @testing-library/react
不写无用测试、只测核心逻辑
接口全部 mock，不发真实请求
代码简洁、符合 React18+ 规范、TS 严格类型
测试用例全覆盖：正常场景、边界场景、异常场景

二、提示词1：让 AI 写【工具函数单元测试】

适用场景：日期格式化、金额计算、数据处理函数

直接复制使用：

【角色信息】
你是资深前端测试工程师，请帮我编写 Vitest 单元测试。
【】项目技术栈
技术栈：Vitest \+ TypeScript
【要求】
1. 只测试纯函数逻辑，不涉及 DOM 和接口
2. 覆盖正常场景、边界值、异常入参
3. 代码简洁规范，添加注释说明每一条用例的意义
4. 不需要 describe 嵌套过多，简洁高效
【以下是我的目标函数代码】
【粘贴你的函数】

三、提示词2：让 AI 写【React 组件测试】（最常用）

适用场景：通用按钮、卡片、表单组件

万能提示词（直接复制）

【角色信息】
你是资深前端测试工程师，请帮我编写 React 组件 Vitest 测试用例。
【技术栈】
React18 + TS + Vitest + testing-library
【要求】
1. mock 所有接口、mock 所有 props 数据
2. 测试核心渲染逻辑：
 - 正常数据渲染是否正确
 - 空数据渲染空状态
 - loading 状态渲染加载中
 - 特殊条件样式动态切换（红绿文字等）
3. 不测试无关业务，只测 UI 展示和状态分支
4. 代码简洁、可直接运行
【以下是我的组件源码】
【粘贴你的组件代码】

四、提示词3：让 AI 写【自定义 Hook 测试】

适用场景：useRequest、自定义数据处理 hook

【角色信息】
你是资深前端测试工程师，请帮我写 React Hook 的 Vitest 测试。
【要求】
1. mock axios 请求，不发送真实网络请求
2. 测试 loading、成功、失败三种状态
3. 测试参数变化、依赖更新逻辑
4. TS 严格类型、代码规范
【Hook 源码如下】
【粘贴你的 Hook】

五、提示词4：让 AI 写【E2E 完整流程测试】

适用场景：页面完整业务流程

【角色信息】
你是资深前端测试工程师，请帮我使用 Playwright 编写 E2E 测试。
【测试场景】
用户完整业务流程
【要求】
1. 模拟真实用户点击、展开、刷新行为
2. 断言页面文本、列表、状态变化
3. 代码简洁、注释清晰、可直接运行
4. 只测核心主流程，不写冗余用例

六、AI 写测试避坑指南（关键）

1. 禁止 AI 做的事

不要让 AI 写过多冗余用例（过度测试）
禁止 AI 在单元测试里发真实接口
禁止 AI 操作真实 DOM 样式像素级测试

2. 必须让 AI 做到的事

所有接口强制 mock
所有测试用例必须有业务意义
边界场景全覆盖（空、0、undefined、异常数据）

ok，大致就这些内容，快去试试吧！（有用就回来支持一波）

标签

#前端 #人工智能 #单元测试 #功能测试 #e2e