React 是一个非常有用的 JavaScript 库，常用于构建单页应用程序。对于一个前端的开发者来说，了解如何创建可靠和高效的 React 组件至关重要。但是，即使在最好的代码质量下，错误也可能在不经意间进入应用程序。这时，测试就是极其重要的环节，并且使用 Jest 和 Enzyme 尤其方便。
Jest 是 Facebook 开源的一款针对 JavaScript 应用程序的单元测试框架。它能够完全自动化进行测试，并且提供了一个开箱即用的测试环境。Enzyme 是 Airbnb 开源的另一款 JavaScript 库，它使得 React 组件的测试更加简单易懂，是 React 测试中的首选框架之一。
本文将介绍如何使用 Jest 和 Enzyme 进行 React 组件测试，并且提供一些常见的测试技巧和用例，希望能够帮助读者更好地理解这两个框架的原理和用法。
安装 Jest 和 Enzyme
首先，安装 Jest：
npm install --save-dev jest
然后，安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
Enzyme 还需要一个 React 适配器，这里我们使用版本为 16。如果你使用的 React 版本不同，则需要相应地更改安装命令。
编写测试用例
下面，我们将编写一个简单的 React 组件，然后使用 Jest 和 Enzyme 编写相应的测试用例。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- -------- ------- --------------- -
-------- -
------ -
-----
---------- -----------------------
------
--
-
-
------------------ - -
----- ---------------------------
--
------ ------- ---------这是一个简单的组件，它接收一个名字，然后向用户显示一条问候语。组件需要一个 name 属性，这个属性是必须的，否则会收到控制台错误。
我们将通过编写测试用例来验证它是否按照预期工作。首先，我们需要一个测试文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
---------- ------ - ---------- -- -- -
----- ------- - ----------------- ------------ ----
------------------------------------------------- ---------
---
---------- ----- - -------- ------- -- -- -
----- ------------ - ------------------- ---------
---------------------------------- -- ----
--------- -- ----------------- ----------------------
----------------------------------------
---------------------------
---
---在这个文件中，我们首先导入了 React 和 Enzyme 的 shallow 函数，然后导入了我们要测试的组件 Greeting。然后，我们使用 Jest 的 describe 函数创建了一个测试套件，并且编写了两个测试用例。
第一个测试用例用于测试是否正确渲染了一个问候语。我们使用 shallow 函数来浅层渲染组件，然后使用 Enzyme 的 find 函数来查找渲染的元素。最后，我们使用 Jest 的 expect 函数来断言找到的元素的文本是否与预期相同。
第二个测试用例用于测试传递错误的 props 是否会触发控制台警告。我们使用 Jest 的 spyOn 函数来监听 console.error 方法的调用，并使其不发生任何操作。接下来，我们调用浅层渲染 Greeting 组件的函数，并断言是否会抛出警告，并且是否会调用 console.error 方法。最后，我们还原了 console.error 函数的原始实现。
运行测试用例
现在，我们来运行测试用例：
npm test
这个命令将会自动执行所有的测试用例。
如果你使用的是 Create React App，你可以在 package.json 文件中的 scripts 字段中添加以下内容：
{
"scripts": {
"test": "react-scripts test"
}
}结论
Jest 和 Enzyme 是非常有用的工具，它们可以帮助我们创建更可靠和高效的 React 组件。同时，测试还可以防止我们在开发过程中不小心引入了错误，确保代码能够正常工作。
在本文中，我们已经了解了如何安装 Jest 和 Enzyme，以及如何编写测试用例来测试 React 组件。Jest 和 Enzyme 还有很多强大的功能和用法，读者可以根据自己的需求来深入学习。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67751f146d66e0f9aaf3fb05