SafeTest：一种新颖的前端测试方法

Moshe Kolodny 最近介绍了 SafeTest，这是一种新颖的前端 Web 测试方法。SafeTest 通过整合测试运行器、浏览器自动化库、UI 框架和依赖注入能力，旨在缓解传统 UI 测试方法的痛点。SafeTest 目前已在 Netflix 中使用。

传统 UI 测试的挑战

Kolodny 指出，UI 测试的两种主要方法——单元测试和端到端测试——都存在各自的权衡。

1. 单元测试：

   • 随着用户界面逐渐采用基于组件的框架（如 React、Vue、Angular），UI 单元测试逐渐演变为组件测试。
   • 组件依赖于框架，因此需要框架提供特定的测试能力（如 React 的 act 方法、Angular 的 TestBed API）。
   • 组件变得更大、更复杂，依赖项（如 UI 框架、子组件、DOM、网络、副作用函数、配置等）也随之增加。
   • 单元测试（即隔离测试单元）变得越来越困难，开发者经常需要在测试中引用内部实现细节，导致组件实现变化时测试失败。

2. 端到端测试：

   • 端到端测试（如 Cypress 和 Playwright）使用真实浏览器并针对实际应用运行，能够测试诸如 z-index 等问题。
   • 然而，端到端测试无法隔离测试组件，且难以设置不同的测试夹具（如测试管理员用户和普通用户的不同权限）。
   • 对于外部服务依赖（如 OAuth），端到端测试无法在未运行实际应用实例的情况下渲染组件。

SafeTest 的解决方案

SafeTest 结合了单元测试和端到端测试的优点，提供了一种新的测试方法：

1. 真实浏览器支持：

   • SafeTest 允许使用真实浏览器进行测试，支持截图、视频录制和回放、追踪查看等功能。
   • 同时，SafeTest 仍然支持对非浏览器依赖项进行模拟。

2. 依赖注入机制：

   • SafeTest 提供了一个名为 override 的依赖注入机制，用于模拟或监视内部依赖（如静态函数、值、API 响应）。
   • 对于外部依赖（如网络或 Web 服务），SafeTest 可以借助其他库（如 Playwright 的网络层模拟）进行模拟。

开发者反馈

1. 依赖注入的潜力：

   • 有开发者认为 SafeTest 可以为 React 带来更自然的依赖注入机制，从而在测试之外带来更多好处。

2. 软件设计的重要性：

   • 另一位开发者强调，依赖注入的需求可以通过软件设计来缓解，例如将隐式依赖显式化（如通过 props 或查询字符串参数）。

3. SafeTest 的独特性：

   • 尽管 SafeTest 的注入机制可能让一些开发者感到不适，但其解决 UI 测试痛点的能力得到了认可。

开源与技术支持

SafeTest 是开源的，采用 MIT 许可证。开发者可以通过 发布说明 获取更多技术细节和代码示例。

总结

SafeTest 通过结合单元测试和端到端测试的优势，提供了一种新的前端测试方法。它使用真实浏览器进行测试，同时支持对非浏览器依赖项进行模拟，并通过依赖注入机制简化了测试设置。尽管其依赖注入机制可能引发争议，但 SafeTest 为解决 UI 测试中的复杂问题提供了有价值的解决方案。