在 React 开发中，测试组件是非常重要的一环，它可以保证我们的组件代码的正确性和稳定性。而 Jest 和 Enzyme 是 React 生态圈中非常流行的测试框架，通过使用它们，我们可以快速有效地编写测试用例。
为什么选择 Jest+Enzyme
在选择测试框架时，我们需要考虑以下几个方面：
- 与我们的技术栈相适应
- 社区活跃度
- 代码覆盖率
- 测试用例编写复杂度
而 Jest+Enzyme 符合了这些方面的要求。Jest 是 Facebook 开发的快速、可伸缩的 JavaScript 测试框架，它与 React 生态圈的其他工具紧密协作。Enzyme 则是 Airbnb 开发的针对 React 组件的 JavaScript 测试工具，能够帮助我们简化组件的测试。
开始使用 Jest+Enzyme
安装 Jest 和 Enzyme
首先，我们需要安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是适用于 React 16 的 Enzyme 适配器。
初始化 Enzyme
接下来，在测试文件中，我们需要初始化 Enzyme，以便它能够与我们的组件协作。我们可以在测试文件的开头添加以下代码：
import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这段代码将适配器配置为 React 16。
编写测试用例
下面，我们将编写一个简单的测试用例，以及使用 Jest+Enzyme 来测试我们的组件。
假设我们有一个组件，它包含一个输入框和一个按钮，用户可以在输入框中输入搜索词，然后点击按钮。当用户点击按钮时，我们将触发一个事件，将搜索词传递给父组件，并且清空输入框。
我们先来编写一个测试用例，这个用例确保当用户输入搜索词并点击按钮时，我们正确处理了事件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ --------- ---- -------------- ----------- ------ ----------- -- -- - -- ----- ----- ------- - ------------------ ------------ -- --- ---- -- --------- ---------------------------------------- - ------- - ------ ------- - --- -- -------- ----------------------------------------- -- ------------------- -------------------------------------------------- ------------------------------------------------------------------------ ---
在这个测试用例中，我们初始化了一个 SearchBar 组件，并模拟了用户输入搜索词和点击按钮的行为。然后，我们验证组件状态是否正确更新、事件是否正确触发。
运行测试
最后，我们需要可以通过以下命令轻松运行我们的测试：
npm test
注意，Jest 默认搜索所有文件名以 .test.js 或 .spec.js 结尾的测试文件，并运行所有测试用例。
在测试运行期间，Jest 还会生成代码覆盖率报告，它可以让我们了解我们的测试是否涵盖了代码的足够部分。
总结
在本文中，我们介绍了 Jest+Enzyme 测试框架，它们是在 React 应用程序中进行单元测试的好选择。我们还演示了如何使用这些工具编写一个简单的测试用例，并了解了如何运行测试并生成代码覆盖率报告。
使用 Jest+Enzyme 进行测试可以让我们更加自信地编写和维护代码。希望这篇文章可以帮助你刚入门 Jest+Enzyme 测试框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1ab02b5eee0b5258e9b0f