2021 年的最后一个月，重新思考一下 Frontend Testing。对于 Frontend，我们要如何保证项目的品质？

其实，对于 Frontend Testing 我没有太多独特的见解。我对 Frontend Testing 的理解，大部分是来自其他优秀的工程师的分享，少部分是自己的一些工程实践。对于我自己，Frontend Testing 有哪些内容是值得拿出来分享的？

1. 测试一定要整合到 CI/CD 中

这是我个人的经验，测试一定要整合到 CI/CD 中。一方面，如果测试没有整合到 CI/CD 中，那么测试就不能阻止我们发布包含错误的产品到生产环境，也就是没有保证品质。另一方面，如果测试没有整合到 CI/CD 将无形地增加开发者的工作量，开发者不得不手动执行测试。很多开发者并不是不愿意编写测试代码，只是不愿意等待测试代码漫长的执行过程。

2. 倒金字塔的测试优先级

相信绝大多数软件工程专业毕业的的开发者（学院派）都曾被教育 Unit Testing 大于 Integration Testing 的测试覆盖原则，就像金字塔。

但是，最新的工程实践提出了相反的意见。越来越多的开发者认为 Integration Testing 大于 Unit Testing，甚至 End-to-End Testing 最大。

Write tests. Not too many. Mostly integration.

rauchg

3. Frontend 特有的 Visual Testing

Visual Testing 是 Frontend 特有的测试类型。如果你参与的 Frontend 项目还没有引入 Visual Testing，我强烈建议你研究一下。我想说：“Visual Testing saved my life.”

关于 Visual Testing，我也提倡遵守倒金字塔的优先顺序，这可能和绝大多数开发者的观点有所不同。

那么，是否我认为 Component Visual Testing 不需要？答案是否定的。 如果项目有足够的时间、预算，我觉得 Component Visual Testing 是 Nice to have。请视情况而定。

4. 不要忘记测试你的 Utils

请不要简单的认为 Frontend 仅仅是 UI，这是低级的 Backend 和低级的 PM 才会犯的错误。随着软件行业的发展，越来越多的功能被移动到了 Frontend。Frontend 不再只是简简单单地展示数据了。Frontend 中包含了越来越多的复杂逻辑，请不要忘记测试这部分代码。

优秀的 Frontend 项目，页面展示和逻辑处理一定是相互独立的，所以不要忘记测试你的 Utils。

TJ

5. React Testing Example

https://github.com/ThaddeusJiang/react-testing-example

这是我曾经做内部分享时创建的项目，目的是展示 React 项目如何进行测试。 很久没有更新了，不过大致思路和本篇文章没有改变。 可以当作本篇文章的实践参考吧。

6. Nice To Have

1. 最好覆盖不同的屏幕大小。
2. 最好可以保留测试截屏或录屏。
3. 最好使用 JS 社区的测试框架、工具和平台。
4. ...

最后，推荐一些我很喜欢的 Frontend 测试框架、工具和平台

• TypeScript
• Jest
• Cypress
• Mock Service Worker
• GitHub Actions
• Checkly
• ...

参考

• Develop, Preview, Test
• Write tests. Not too many. Mostly integration.
• Integration > Unit tests is the new conventional wisdom.