2、组件测试的重要性与测试策略归纳总结

咱们做UI自动化测试，最容易踩的坑就是「一上来就跑全链路」。你想想看，一个页面几十个组件，互相耦合着，一旦报错你根本不知道是哪个环节出了问题。我以前在某电商项目里就吃过这个亏——辛辛苦苦写了一套登录流程的端到端用例，结果每次跑都挂，排查了三天才发现是某个输入框的圆角样式导致点击区域偏移了。

从那以后，我彻底转变了思路。组件测试才是UI自动化的基石。说白了，就是把每一个 Material 3 组件拆出来单独测，保证它自己没问题，再往上组装。

为什么要做组件测试？

三个核心原因，我一个个说。

1. 隔离性：组件测试只关注单个组件的渲染和交互。外部依赖全用Mock替代。出问题了，定位极其精准。
2. 速度：不需要启动整个应用，不需要依赖后端服务。跑一轮组件测试，通常在几十秒到几分钟。我在项目中试过，全量组件测试跑完只需要47秒，而一个端到端用例就要2分钟。
3. 覆盖率：你可以穷举组件的所有状态。比如一个按钮，正常态、按下态、禁用态、加载态、不同颜色变体……全用Mock覆盖。这在端到端测试里根本做不到。

测试策略归纳总结

做了这么多年UI测试，我总结了一套针对Material 3组件的测试策略。一共四个层次：

层次	测试类型	测试工具	覆盖范围	示例组件
L1	渲染快照	Storybook + Chromatic	所有视觉状态	Button, Card, Chip
L2	交互行为	Testing Library + Vitest	点击、输入、焦点、手势	TextField, Switch, Slider
L3	Mock数据流	MSW + Jest	异步加载、表单提交、列表渲染	Autocomplete, DataTable
L4	无障碍	axe-core + jest-axe	ARIA属性、键盘导航、屏幕阅读器	所有可交互组件

我个人习惯是从L1开始，先保证每个组件的渲染不出错。然后逐步往上叠加。千万别一上来就搞L3，那样你的Mock数据会变得特别复杂，出了问题也搞不清是渲染错还是数据错。

Mock回放的核心逻辑

这章咱们重点讲的是Mock回放。它是一个什么玩意儿？我用一句话说清楚：录制真实用户的操作序列，然后在测试中精确回放，同时用Mock拦截所有外部依赖。

举个例子。你在真实应用里点击了一个Button，弹出了一个Dialog，Dialog里填了表单，点了提交，接口返回了成功。这个操作序列被录制下来。然后在测试环境里，你用Mock把接口返回给「冻住」了，每次回放都返回同样的数据。这样你就得到了一个100%可复现的测试用例。

一个真实的Mock回放策略模板

这是我目前在用的模板结构，直接给你参考：

// 组件测试Mock回放框架示意
export class ComponentPlaybackTest {
  private recorder: UserActionRecorder;
  private mockServer: MockServiceWorker;
  private snapshot: ComponentSnapshot;

  async setup() {
    // 初始化Mock服务器，拦截所有外部请求
    this.mockServer = new MockServiceWorker();
    await this.mockServer.start();

    // 设置组件快照基准
    this.snapshot = new ComponentSnapshot(this.component);
  }

  async record() {
    // 录制用户操作序列
    this.recorder = new UserActionRecorder(this.component);
    await this.recorder.start();
    // 手动执行操作...
    await this.recorder.stop();
    return this.recorder.getActions();
  }

  async replay(actions: UserAction[]) {
    // 回放录制的操作
    for (const action of actions) {
      await action.execute(this.component);
      // 每次操作后比较快照
      expect(this.snapshot.compare()).toMatchSnapshot();
    }
  }
}

这个框架的核心是操作与数据分离。录制时只记录操作序列，不关心数据。回放时通过Mock保证数据一致。这样即使后端接口改了，你的测试依然能跑——只要组件的行为没变。

本章知识结构图

下面这张图，是我对这个章节核心逻辑的总结。你可以把它当作一张「测试路线图」：

总结一下这张图的核心：组件测试的重要性驱动了测试策略的制定，而Mock回放是让这个策略落地的关键手段。你只要把L1到L4一步一步走扎实，Mock回放机制搭好，就能拿到那个「确定性」。