React 是一个流行的前端框架，而 Jest 是一个流行的 JavaScript 测试框架。在开发 React 应用程序时，测试是非常重要的一部分。在本文中，我们将学习如何使用 Jest 来测试 React 组件。
准备工作
在开始之前，我们需要确保已经安装了以下软件：
- Node.js
- npm 或 Yarn
我们还需要安装 Jest 和 Enzyme。可以使用以下命令来安装它们：
npm install --save-dev jest enzyme enzyme-adapter-react-16
或者
yarn add --dev jest enzyme enzyme-adapter-react-16
编写测试
在编写测试之前，我们需要创建一个 React 组件。以下是一个简单的组件示例：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
------- ------------------------
------------
---------
--
-
------ ------- -------我们将使用 Jest 和 Enzyme 来测试该组件的行为。以下是一个测试示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- ----------- -- -- -
----- ------ - --------------- ----------- --- ----
---------------------------------
---
--------- ------- ---- ---- --------- -- -- -
----- ------- - ----------
----- ------ - --------------- ----------------- ----------- --- ----
-------------------------
-----------------------------------
---
---让我们逐个解释这个测试。
首先，我们使用 shallow 函数来创建一个浅渲染的组件。然后，我们使用 Jest 的 toMatchSnapshot 函数来测试组件是否正确地呈现。这个函数会比较组件的快照（即组件的渲染结果）和之前保存的快照是否相同。如果它们不同，测试将失败。
然后，我们测试了点击按钮时是否调用了 onClick 属性。我们使用 Jest 的 fn 函数来创建一个模拟函数，并将其传递给组件的 onClick 属性。然后，我们使用 Enzyme 的 simulate 函数来模拟用户点击按钮。最后，我们使用 Jest 的 toHaveBeenCalled 函数来测试模拟函数是否被调用。
运行测试
在编写测试之后，我们需要运行它们。我们可以使用以下命令来运行测试：
npm test
或者
yarn test
这将启动 Jest 运行测试并输出结果。
结论
在本文中，我们学习了如何在 Jest 中测试 React 组件。我们使用了 Enzyme 来帮助我们创建和测试组件，并使用 Jest 来运行测试和断言。测试是开发过程中非常重要的一部分，它可以帮助我们确保我们的代码在各种情况下都能正常工作。希望这篇文章可以帮助你开始编写更好的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673aadfe39d6d08e88af4e72