Enzyme 中的 Spying 与 Stubbing 的区别及适用场景
在 React 前端开发中，我们经常会使用 Enzyme 进行组件测试。Enzyme 提供了很多有用的函数来协助我们写测试，其中就包括 Spying 和 Stubbing。但这两个概念容易混淆，因此在本文中将详细介绍它们的区别及适用场景。
什么是 Spying？
Spying（间谍）是一种通过跟踪函数的调用情况来测试代码的技术。简单地说，就是在测试组件的某个函数时，我们希望知道这个函数是否被调用，以及它被调用了多少次，以便确定代码是否正确执行。
Enzyme 提供了 jest.fn() 方法来实现 Spying。下面是一个示例：
-- -- ------ ---- --------- ----------- -------- ---- ----- ------ -- --------- -- -- - ----- ------- - -------------- ---- ----- -------------- - ---------- ------------------------------ - --------------- ------------------------------------------------ ------------------------------------------ ---
在这个示例中，我们希望测试 handleLogin 函数是否被调用。我们使用了 jest.fn() 来创建一个 Mock 函数，并且将它赋值给了组件的 handleLogin。当模拟点击登录按钮后，我们期望这个 Mock 函数被调用。
如果测试失败，我们可以通过查看该 Mock 函数的调用情况来调试错误。比如，通过 expect(handleLoginSpy).toHaveBeenCalledTimes(1) 验证该函数只被调用了一次。
什么是 Stubbing？
Stubbing（存根）是一种通过模拟某些数据或函数的返回值来测试代码的技术。它可以帮助我们测试某些代码在特定情况下的行为，比如错误处理、异步请求、特定条件下的 UI 显示等。
Enzyme 提供了 jest.fn().mockImplementation() 方法来实现 Stubbing。下面是一个示例：
-- -- -------- ----
------------ ----- ------- -- ----- ------- ----- -- -- -
----- ------- - -------------- ----
----- --------------- - ------------------------------- -- -
----- --- ------------ ---------
---
------------------------------ - ----------------
----- ------------------------------------------------
-------------------------------------------------------
---在这个示例中，我们希望测试在登录失败时是否成功显示了错误信息。我们使用了 jest.fn().mockImplementation() 创建了一个 Mock 函数，并且模拟了登录失败的场景。当模拟点击登录按钮后，我们期望错误信息被渲染。
如果测试失败，我们可以通过查看该 Mock 函数的返回值来调试错误。比如，通过将 throw new Error() 改为 return Promise.reject(new Error()) 可以模拟异步请求的错误处理。
Spying 和 Stubbing 的区别
Spying 和 Stubbing 有一个关键的区别：Spying 通常用于验证函数是否被调用，而 Stubbing 通常用于模拟函数的返回值或错误处理。
在前面的两个示例中可以看出，Spying 的目的是验证某个函数是否被调用，而 Stubbing 的目的是模拟特定情况下的执行结果。因此，它们适用的场景也不同。
适用场景示例
Spying 适用于以下场景：
- 验证某个函数是否被调用，以及被调用了多少次。
- 检查函数的传入参数是否正确。
- 监听某个事件是否触发。
Stubbing 适用于以下场景：
- 模拟异步请求，以便测试错误处理或 UI 显示等情况。
- 模拟某些函数返回值，以便测试特定条件下的功能执行。
- 模拟逻辑错误或异常，以便测试错误处理或日志输出等情况。
结论
Spying 和 Stubbing 是 Enzyme 中常用的测试技术，但在使用它们时需要明确它们的区别及适用场景，才能发挥最大的效果。希望本文能够帮助前端开发者更好地理解这两种技术并应用于实际开发中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fcb4dc447136260171e951