React 是一个广泛使用的 JavaScript 库，用于在 Web 上构建用户界面。在开发 React 应用程序时，我们需要确保代码具有高质量和可靠性，并且能够使用灵活的测试框架来测试组件。Enzyme 和 Sinon 是两个最流行的 React 测试库，它们让开发者能够更轻松地编写和运行测试用例，以确保代码的正确性和稳定性。
Enzyme 是什么？
Enzyme 是由 Airbnb 开发的 React 测试工具，它提供了一个易于使用的 API，可以模拟组件的渲染行为、测量 UI 组件渲染的性能、查找和操作 DOM 元素，并快速断言。Enzyme 对于测试驱动开发的流程很有帮助，可以更好的了解组件的工作原理。Enzyme 支持渲染方式为 mount、shallow、render 这三种方式。
mount
使用 mount 的方式进行 React 组件测试可以实际地渲染组件，并在测试时操作他们，这样可以检查复杂的组件或组件组合的行为，是测试 React 组件内部实现的最佳方式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- -- -- -
----- ------- - ------------------ ------------ ------- ----
-------------------------------------------
------------------------------------------------ ---------
---
---在上面的代码中，我们使用 Enzyme 库中的 mount 方法渲染了 MyComponent 组件，并检查了是否存在一个 h1 标签以及它的文本内容是否为 Hello World。
shallow
使用 shallow 的方式进行 React 组件测试，只会渲染为当前组件，不会涉及其子组件，这使得测试更加高效。然而，由于它是在虚拟的 DOM 中进行测试的，因此它并不能检查一些特定功能，例如事件传播和生命周期。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- -- -- -
----- ------- - -------------------- ------------ ------- ----
-------------------------------------------
------------------------------------------------ ---------
---
---在上面的代码中，我们使用 Enzyme 库中的 shallow 方法渲染了 MyComponent 组件，并检查是否存在一个 h1 标签以及它的文本内容是否为 Hello World。
render
使用 render 方法进行 React 组件测试的方式可以在深度测试 UI 的场景下使用，但是不支持事件处理、生命周期方法等。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- -- -- -
----- ------- - ------------------- ------------ ------- ----
-------------------------------------------
------------------------------------------------ ---------
---
---在上面的代码中，我们使用 Enzyme 库中的 render 方法渲染了 MyComponent 组件，并检查是否存在一个 h1 标签以及它的文本内容是否为 Hello World。
Sinon 是什么？
Sinon 是一个 JavaScript 测试库，主要用于测试 JavaScript 的行为，例如监视 JavaScript 函数、Spies 模拟数据等。它通常与 Mocha 或 Jest 等测试框架一起使用，可以方便地进行函数和 API 的测试，可以大大简化测试代码的编写，并确保前端应用程序的质量和稳定性。
Mocking 函数
使用 Sinon 的最常见方法之一是模拟函数。通过使用 Sinon 的 spies，我们可以轻松地监视函数的调用并验证返回值等。
-- -------------------- ---- -------
------ - ------ - ---- -------
------ ----- ---- --------
------ --------- ---- --------------
--------------------- -- -- -
---------- ------ ------ ----- -- -- -
----- ---------- - - ---- ----- --
----- ------- - ----------------------- ----- ---------- ---
----- ------ - ----- -------------------
------------------------------------
--------------------------------------
---
---在上面的代码中，我们使用 Sinon 的 stub 方法来监视 fetchData 函数的调用，并验证返回值是否与服务器数据匹配，并使用 calledOnce 检查 fetchData 函数是否只被调用了一次。
Mocking API
在测试前端应用程序时，常常需要模拟 Web API 的调用，例如使用 Sinon 的 fakeServer 方法。
-- -------------------- ---- -------
------ - ------ - ---- -------
------ ----- ---- --------
------ ----- ---- --------
------ --------- ---- --------------
--------------------- -- -- -
--- -------
------------- -- -
------ - --------------------------
------------------------- -------- ----- - --------------- ------------------ -- --------- ---------------
---
------------ -- -
-----------------
---
--------- --- ----- ----- -- -- -
----- ------ - ----- ------------
---------------------------- ----- ---------- ---
--------------------------------------------------
---
---在上面的代码中，我们使用 Sinon 的 fakeServer 方法模拟服务器数据，并使用 expect 断言来验证是否正确地返回了服务器的响应。
结论
本文中我们介绍了两个流行的 React 测试工具，Enzyme 和 Sinon。Enzyme 提供了易于使用的 API 来模拟组件类、操作 DOM 元素等用例，可以帮助我们测试 React 应用程序的组件。Sinon 则可以帮助我们更轻松地实现测试，例如监视函数调用、模拟 API 等。我们建议在开发 React 应用程序时深入了解这些测试工具，并使用它们来确保高质量和可靠性的代码，同时提高代码的可扩展性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb986944713626015f2e24