在开发 React 应用程序的过程中，我们经常需要测试组件的 props 是否按照预期工作。Enzyme 是一个流行的 JavaScript 测试实用程序，它提供了一些强大的工具来测试 React 组件。在这篇文章中，我们将学习如何使用 Enzyme 测试 React 组件 props 的使用方法。
安装 Enzyme
首先，我们需要安装 Enzyme。可以使用 npm 或 yarn 安装 Enzyme，并将其添加为依赖项：
--- ------- ---------- ------ -----------------------
或
---- --- ----- ------ -----------------------
我们还需要为 React 16+ 安装相应的适配器，我们选择适配器 enzyme-adapter-react-16。
测试 React 组件 props
使用 Enzyme 测试组件的 props 通常包括以下步骤：
- 渲染一个 React 组件。
- 使用 Enzyme 提供的一些 API 访问组件的 props。
- 验证 props 的值是否正确。
这里是一个示例组件：
------ ----- ---- -------- ----- -------------- - -- ---- -- -- - ---------- ------------ - ------ ------- ---------------
假设我们想要测试这个组件接收的 user 属性是否能够被正确地呈现。这个测试的代码如下所示：
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------------- ---- -------------------
-------------------------- -- -- -
----------- --- ------- ---- ---- -- --- -------- -- -- -
----- ------- - ----------------------- ----------- ----
------------------------------------------------- --------
---
---让我们一步一步地解释这个测试用例：
第一步：渲染一个 React 组件
----- ------- - ----------------------- ----------- ----
这一行渲染了一个 组件，并将 user 属性设置为 "John"。使用 shallow API 可以快速渲染组件，并提供一个轻量级的测试环境。
第二步：使用 Enzyme 提供的一些 API 访问组件的 props
------------------------------------------------- --------
这里使用了 wrapper.find API 来查找
元素，并使用 .text() API 来获取元素的文本内容。如果我们想查找 props 中某个特定的值，也可以使用 wrapper.props() API。
第三步：验证属性的值是否正确
------------------------------------------------- --------
这行代码使用 jest.expect API 来验证渲染的
元素的文本内容是否等于 'Hello, John!'。
测试极端情况
除了测试普通的属性值，我们也需要测试可能导致异常的极端情况。例如，如果我们忘记提供一个必需的属性，组件应该返回一个错误消息。
对于这种情况，我们可以使用 Jest 的 expect.toThrow API。
---------- -- ----- -- ---- ---- -- --- ---------- -- -- - --------- -- ----------------------- --------------- ---
这个测试用例会在 shallow() 语句中调用，因为 WelcomeMessage 组件需要一个 user 属性，如果没有提供 user 属性，则会抛出一个错误。
结论
Enzyme 是一个重要的测试实用程序，可以帮助我们测试 React 组件的 props 是否按照预期工作。通过本文中的示例代码，您可以了解如何使用 Enzyme 测试 React 组件。我们理解如何测试组件的普通属性和极端情况，可以更好地保持我们的应用程序的代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671ddaa19babaf620fb885d7