自动化测试 | 字节青训营

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

The more your tests resemble the way your software is used, the more confidence they cangive you. ——《Google软件测试之道》

• 自动化测试：单元测试和e2e测试
• 单元测试：给设计师和开发人员用
• e2e测试：给用户用

前端为什么要做自动化测试

1. 统一代码风格
2. 组件 Readme 用例化，保持时效性
3. 有效审视代码中的合逻辑
4. 避免后续迭代影响到历史功能，发布 breaking change

技术选型

Jest + React testing library + Cypress + storybook:

测试框架: Jest (提供一个可运行的环境、测试结构、结果报告、代码覆盖、断言、mocking 、snapshot)

测试辅助库: react-testing-library (dom查询，断言和事件的模拟，React18 推荐的UI自动化的集大成测试辅助库)

Cypress + storybook: E2E 端对端测试，覆盖单元测试不易于覆盖的复杂场景

配置示例仓库: github.com/czm12904337… demo 仓库: github.com/czm12904337…

元素

查询

• Get: 返回查询的匹配节点，如果没元素匹配，则会报错(针对单查如果查到多个也会报错)
• Query: 返回查询的匹配节点，如果没有元素匹配会返回 null，但是不会报错(同样针对单查，如果查到多个匹配元素也会 报错)
• Find: 返回一个 Promise，:默认超时时间为 1000 ms，如果没有元素匹配或者查找超时，Promise 状态切为 reject (同样针对单查，如果查到多个元素，也会返回 reject)

ARIA(Accessible Rich InternetApplications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web应用程序(尤其是使用 JavaScript 开发的应用程序) 的方法。

通过无障碍属性查询相比通过类名查询减少对代码结构的依赖，使得用例更为强健，不容易被修改

如果有默认的 ARIA 角色和 label.那么就不去创建新的去覆盖 更详细的隐藏 role 属性大家可以看W3C 对应的提案(www.w3.org/TR/html-ari…

断言

• 可以分为 Jest 和 Jest Dom 提供，是一组判断当前元素是否符合某种预期的效果
• Jest 提供了一系列基础的断言，类似toBe，not，toEqual 等，可以移步jestjs.io/docs/gettin… 查阅
• Jest Dom 是 react testing library 补充的一系列与DOM 相关的特殊断言，可以移步github.com/testing-lib… 查阅

事件模拟

• 针对这种场景，React Testing Library 提供了两种手段来模拟，fireEvent 和 userEvent我们更推荐使用 userEvent，相比fireEvent.userEvent 更贴切真实场景地模拟了事件而 fireEvent 只是调度对应的事件我们书写的用例应该尽可能从用户视角来展开，而不是代码层面，这样对于用例本身来说，才是更强健的

• 在实际的场景中，我们点击一个按钮会有先 hover 再聚焦的过程，这些事件的触发并不会在fireEvent 中体现出来。 userEvent则是在模拟完整的事件流程，我们上面提到的 click 事件，它同样也会触发 hover 等事件效果，更为真实地还原了用户的场景

• 异步

• 快进定时任务

• Mock

• 快照测试

• E2E

自动化的持续集成

• 覆盖率
• 提升覆盖率
• 持续集成 掘金小册《前端自动化测试精讲》: juejin.cn/book/717404…