浅谈前端研发链路之测试

本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。

大家好，我是徐徐。今天跟大家聊聊前端研发链路不可缺少（取决于自己🤣）的一环：测试。

前言

你是不是经常听到周围的同事在讨论单元测试、E2E测试啥的，但又觉得一头雾水？别担心，这篇文章就是为你准备的！我们将一起探讨前端测试的世界，搞清楚它是什么、为什么要做、以及怎么做。相信读完这篇文章，你会对前端测试有个全新的认识！

什么是前端测试

简单来说，前端测试就是确保我们写的代码能够正常工作的一系列检查手段。想象一下，你刚写完一个超酷的功能，兴高采烈地准备上线，结果发现在用户那边完全跑不起来，那岂不是尴尬到爆？所以，我们需要在开发过程中不断进行测试，及时发现并修复问题。

为什么要做前端测试

你可能会问："我写的代码我自己还不清楚吗？为啥还要浪费时间去测试？"哈哈，我懂你的心情。但是，想象一下以下场景：

1. 你的项目越来越大，代码越来越复杂，你真的能保证每次修改都不会影响其他功能吗？
2. 你的团队有多个人在同时开发，怎么确保大家的代码能够完美配合？
3. 产品经理突然说要改需求（太真实了！），你怎么快速确认修改后的代码没有引入新的bug？

看到了吧，测试其实是在帮我们省时间、省力气，让我们的代码更可靠、更容易维护。

前端测试怎么做

好了，现在我们知道了为啥要做测试，那具体怎么做呢？前端测试主要分为五块内容：单元测试、E2E测试、覆盖率测试、安全扫描、自动化测试。我们一个个来聊聊。

1. 单元测试

单元测试就像是给代码做体检，我们把代码拆分成小单元（通常是函数或组件），然后逐个检查它们是否工作正常。
常用的工具有：

• Jasmine：老牌测试框架，语法简单易懂。
• Mocha：灵活性强，可以搭配各种断言库使用。
• Jest：Facebook出品，配置简单，适合React项目。
• Enzyme：专门为React组件测试设计，可以模拟各种交互。

选择哪个工具？这就要看你的项目需求和个人喜好了。我个人比较喜欢Jest，因为它"麻烦"最少，开箱即用。

2. E2E测试

E2E（End-to-End）测试就是模拟真实用户操作，从头到尾测试整个应用。想象一下，你在测试一个购物网站，E2E测试就是自动完成"浏览商品→加入购物车→下单支付"这一系列操作。
让我们来详细了解一下常用的E2E测试工具：

• Selenium：老牌自动化测试工具，支持多种编程语言。它的优势在于跨浏览器兼容性强，但配置和维护可能比较复杂。
• Cypress：新兴的前端测试工具，使用简单，支持实时重载。Cypress的特点是运行速度快，调试方便，但目前主要支持Chrome浏览器。
• Puppeteer：Google出品，可以控制Chrome浏览器进行测试。它不仅可以用于测试，还能用于网页爬虫和自动化操作，比如生成网页PDF等。
• Appium：主要用于移动应用测试，但也支持Web应用。如果你的项目需要同时测试Web和移动端，Appium是个不错的选择。
• WebDriver：一个开源工具，用于跨浏览器的自动化测试。它提供了一套标准的协议，让你可以用统一的方式控制不同的浏览器。
• Karma：一个测试运行器，可以在真实的浏览器环境中运行测试。它经常和Jasmine或Mocha等测试框架配合使用。
• PhantomJS：一个基于WebKit的无头浏览器，可以用来进行自动化测试。虽然现在维护已经停止，但在一些遗留项目中可能还会遇到。
• UIRecord：这是一个比较特别的工具，它可以记录用户的操作并生成测试脚本。对于不熟悉编程的测试人员来说，这是个不错的选择。
• ChromeDriver：专门用于自动化测试Chrome浏览器的工具。如果你的用户主要使用Chrome，那么ChromeDriver是个不错的选择。

选择哪种E2E测试工具，主要取决于你的项目需求和团队技术栈。如果你的团队主要使用JavaScript，那么Cypress或Puppeteer可能更适合。如果需要测试多种浏览器，Selenium可能是更好的选择。如果需要同时测试Web和移动应用，那么Appium值得考虑。
记住，E2E测试虽然功能强大，但也比较耗时。所以通常我们会在重要功能或关键流程上重点使用E2E测试。同时，保持E2E测试案例的稳定性也是一个挑战，因为它们容易受到UI变化的影响。
无论选择哪种工具，关键是要根据你的项目特点，制定合适的E2E测试策略。可以从最关键的用户流程开始，逐步扩展测试覆盖范围。同时，要注意平衡测试的全面性和运行效率，避免测试套件变得太慢或难以维护。

3. 覆盖率测试

覆盖率测试不是一种独立的测试类型，而是用来衡量我们的测试是否足够全面。它会告诉我们，我们的测试用例覆盖了多少代码。
常用的工具是Istanbul，它可以生成漂亮的覆盖率报告，让我们直观地看到哪些代码还没有被测试到。

4. 安全扫描

安全扫描是确保前端代码安全性的重要步骤，它可以帮助我们发现潜在的安全漏洞和风险，防止恶意攻击。
常用的安全扫描工具有：

• ESLint：主要用于检查JavaScript代码中的语法错误和潜在问题，可以通过配置插件来发现安全问题。
• SonarQube：一个开源的代码质量管理平台，可以集成到CI/CD流程中，自动扫描代码中的安全漏洞和质量问题。
• Retire.js：专门用于检测前端依赖库中的已知漏洞，可以帮助我们及时更新有风险的依赖库。
• Snyk：一款开源安全工具，支持多种语言和平台，可以自动检测并修复依赖中的漏洞。

ESLint 不陌生，SonarQube 也用过，至于那款工具好，完全看自己。

5. 自动化测试

大概步骤：

• 确立测试自动化范围 在前端开发中,这意味着确定哪些部分需要自动化测试,如用户界面、功能模块、API调用等。
• 选择合适的自动化工具 前端常用的测试工具包括Jest、Mocha、Cypress等。选择时要考虑项目需求、团队熟悉度和工具特性。
• 规划、设计和制定策略 制定测试计划,设计测试用例,确定测试优先级。在前端中,可能包括单元测试、集成测试和端到端测试的策略。
• 设置测试环境 配置测试框架,搭建模拟环境。对前端来说,可能需要设置浏览器环境、模拟服务器响应等。
• 测试执行脚本 编写并运行测试脚本。例如,使用Jest编写React组件的单元测试,或使用Cypress进行端到端测试。
• 检查和维护测试 定期审查测试结果,更新测试用例,确保测试与代码同步更新

常用的自动化测试工具包括：

• Jenkins：一个开源的持续集成工具，可以自动化构建、测试和部署过程。
• CircleCI：一个云端持续集成平台，配置简单，集成方便。
• Travis CI：另一个流行的持续集成工具，支持多种语言和平台。
• GitHub Actions：GitHub提供的CI/CD服务，可以直接在GitHub仓库中配置自动化工作流程。

自动化测试是将测试过程自动化的手段，可以显著提高测试效率，减少人为错误。

如何选择合适的测试策略？

看到这么多测试类型和工具，你可能会觉得有点晕。别急，我来给你几个小建议：

• 从单元测试开始：单元测试相对简单，可以快速上手。
• 重要功能用E2E测试：比如用户登录、支付等关键流程。
• 保持合理的覆盖率：100%覆盖率很难达到，也没必要。通常80%左右就很不错了。
• 加入安全扫描：定期进行安全扫描，及时发现并修复潜在的安全问题。
• 持续集成：将测试集成到你的CI/CD流程中，每次提交代码都自动运行测试。

记住，测试不是目的，而是手段。我们的目标是提高代码质量，提升用户体验，而不是为了测试而测试。

结语

好啦，我们的前端测试之旅就到这里了。希望通过这篇文章，你对前端测试有了更清晰的认识。记住，测试不是一蹴而就的事情，需要在日常工作中不断实践和积累。开始可能会觉得麻烦，但当你看到自己的代码变得更加健壮、可靠时，相信你会爱上测试的。
最后再问一下，你们开发有写单测吗？我业务开发好像没怎么写单测，如果写 UI 框架还是要写单测，哈哈哈🤣