在 React 开发过程中，展示不同状态下的组件是必须的。但是，如何测试这些条件性展示的组件？在这篇文章中，我们将介绍如何使用 Enzyme 进行有条件的 React 组件展示的测试。
Enzyme 简介
Enzyme 是一个 React 组件测试工具，能够帮助你编写更好的测试。它提供了一个简单的 API 来模拟组件的行为，包括渲染、交互和查询。Enzyme 能够与各种测试框架（如 Jest、Mocha 和 Chai）集成，并且支持不同的渲染模式。
为什么要测试有条件的组件
有条件的组件是 React 开发中非常常见的概念。例如，你可能有一个组件，根据用户是否已经登录显示不同的界面。在这种情况下，你需要测试以下两种情况：
- 用户已经登录。该组件应该呈现登录后的状态。
- 用户未登录。该组件应该呈现登录前的状态。
通过测试，你可以确保这个条件性组件始终按照预期工作，不会出现任何真正的用户操作错误。
如何使用 Enzyme 进行测试
下面，我们将详细介绍如何使用 Enzyme 进行有条件组件的测试。本文将使用 Jest 作为测试框架。
安装 Enzyme
首先，我们需要安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
配置 Enzyme
在你的测试文件中，引入 Enzyme 和 Enzyme 适配器：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// 配置 Enzyme 适配器
Enzyme.configure({ adapter: new Adapter() });编写测试
然后，我们可以开始编写测试了。以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ----------- ---- ----------------
------------------ -------- --- --------- ---
----------------------- -- -- -
----------- --- --------- ------- -- -- -
----- ------- - -------------------- ----------------- ----
----------------------------------------- --------
---
----------- --- ---------- ------- -- -- -
----- ------- - -------------------- ------------------ ----
---------------------------------------- --- ------
---
---在上面的示例中，我们首先导入了我们要测试的组件（MyComponent），然后定义了两个测试用例：
- 使用
shallow来渲染已登录状态的MyComponent。我们期望这个组件呈现“欢迎回来！”的文本。 - 使用
shallow来渲染未登录状态的MyComponent。我们期望这个组件呈现“请登录。”的文本。
接下来，运行 npm test，你应该看到测试通过。
结论
有条件的组件是 React 开发中不可避免的概念。通过使用 Enzyme，你可以轻松地编写测试代码，确保这些组件按照预期工作。希望这篇文章能够帮助你使用 Enzyme 进行有条件的 React 组件展示的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff60c0498172e6300c4f4e