在前端开发中，我们经常会写一些复杂的 React 组件，这些组件需要被良好地测试，以确保它们的正确性和稳定性。在这篇文章中，我们将介绍 Jest 和 Enzyme 的基本概念和使用方法，让你了解如何通过测试来确保组件的正确性和可靠性。
Jest 是什么？
Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它专门用于编写和运行测试用例。它提供了许多有用的功能，如用于模拟函数和模块的 mocker、自动化测试等等。
Enzyme 是什么？
Enzyme 是一个由 AirBnb 开发的 React 测试工具库，它提供了一组实用的 API 来测试 React 组件。它支持渲染组件、访问组件内部状态和属性、模拟事件以及断言组件的输出等功能。
第一个测试用例
让我们来创建我们的第一个测试用例。首先，我们需要安装 Jest 和 Enzyme：
npm install jest enzyme enzyme-adapter-react-16 --save-dev
然后，我们需要配置 Enzyme 适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });然后，我们可以开始编写我们的测试用例了。假设我们有一个组件 Count，它有一个按钮，每次点击按钮时会将计数器加 1。我们可以通过以下方式来测试组件的行为：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
--------------- ----------- -- -- -
---------- ------ ------- ------- -- -- -
----- ------- - -------------- ----
----- ---- - -------------------------
---------------------------- ----
---
---------- --------- ----- ---- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---在这个测试用例中，我们首先使用 shallow 函数渲染了组件，然后通过 find 函数找到了目标元素（一个 <p> 元素和一个 <button> 元素）。接着，我们模拟了按钮的点击事件，并检查了计数器的值是否正确。
测试 Redux
如果你已经使用 React 和 Redux 来构建应用程序，那么测试这些组件也很简单。我们可以使用 Redux 提供的 createStore 函数来创建 Redux store，并将它传递给需要测试的组件。下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------- - ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
--------------- --------- ---- ------- -- -- -
--- ------
--- --------
------------- -- -
----- - ---------------------
------- - --------
--------- --------------
------ --
-----------
--
---
---------- ------ ------- ------- -- -- -
----- ---- - -------------------------
---------------------------- ----
---
---------- --------- ----- ---- ------ -- --------- -- -- -
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---在这个示例中，我们首先使用 createStore 函数创建了 Redux store，并将它传递给 <Count> 组件。然后，我们使用 shallow 函数渲染了 <Count> 组件，并使用 find 函数找到了目标元素。最后，我们模拟了按钮的点击事件，并检查了计数器的值是否正确。
总结
在本文中，我们介绍了 Jest 和 Enzyme，让你了解如何使用它们来测试 React 组件。我们演示了如何编写简单的测试用例，并展示了如何使用 Redux 测试组件。测试是保证前端应用程序正确性和稳定性不可或缺的一部分，我们鼓励你对自己的应用程序进行测试，并为其添加更多测试用例，以确保其正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f6bd195b1f8cacd6fb002