在 React 中，高阶组件 (Higher-Order Components，简称 HOC) 是一种常见的技术，可以重用组件逻辑，增强组件功能。但是，测试 HOC 可能会有一些挑战。本篇文章将深入探讨如何使用 Enzyme 测试 React 高阶组件。
什么是 Enzyme？
Enzyme 是由 Airbnb 开源的一个 React 测试工具。它提供了一些强大的功能，旨在简化 React 应用程序的测试，并允许你模拟 React 组件的行为。
Enzyme 支持多种测试模式，如 shallow、mount 和 render。其中，shallow 模式可以测试组件的渲染行为，而不是其子组件的行为；而 mount 则实际渲染组件和其子级组件，并允许您测试“真实”DOM 行为。
测试 HOC
当我们测试 HOC 时，我们希望确保以下几点：
它应该接受一个组件并返回另一个组件，而不是直接返回 JSX。如果不是这样，我们无法使用 Enzyme 的 shallow 和 mount 方法来测试它。
我们可以验证 HOC 是否正确地向其包装的组件中注入了我们需要的 props。
例如，让我们考虑一个名为 withLoading 的 HOC：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - ------------------ -- -
------ ----- ----------- ------- --------------- -
----- - -
---------- -----
--
------------------- -
------------- -- -
--------------- ---------- ----- ---
-- ------
-
-------- -
------ --------------------
- ---------------------
- ----------------- --------------- ---
-
--
--
------ ------- ------------该 HOC 在一个固定的时间内显示一个加载中的消息，然后渲染它所包装的组件。让我们来测试它。
测试 withLoading
首先，我们需要在测试文件中导入 Enzyme 和我们的 HOC：
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import withLoading from './withLoading';
Enzyme.configure({ adapter: new Adapter() });接下来，我们需要创建一个模拟组件来帮助测试。这个模拟组件应该接受一个 props，以验证 HOC 是否正确注入了我们需要的 props：
const MockComponent = (props) => <div>{props.text}</div>;接下来，我们可以创建一个测试套件来测试我们的 HOC：
describe('withLoading', () => {
it('renders the wrapped component when loading state is false', () => {
const WrappedComponent = withLoading(MockComponent);
const wrapper = shallow(<WrappedComponent text="Hello, world!" />);
expect(wrapper.find(MockComponent).length).toEqual(1);
expect(wrapper.contains(<MockComponent text="Hello, world!" />)).toEqual(true);
});
});在这个测试套件中，我们首先创建一个带有 HOC 包装的 mock 组件，并使用 Enzyme 的 shallow 方法来创建一个 shallow 渲染的 wrapper 对象。
然后，我们可以验证包装组件是否渲染正确。在这个例子中，我们可以检查如下：
- wrapper 是否包含一个 MockComponent 组件；
- wrapper 中是否包含带有正确 props 的 MockComponent 组件。
现在，如果我们运行测试，应该看到测试通过。但是，如果我们有一个更复杂的 HOC，它可能涉及到一些更复杂的验证。在这种情况下，我们可以使用 Enzyme 的模拟数据和方法和属性断言。
使用模拟数据和方法和属性断言
考虑下面的示例 HOC，它会将一个布尔值 prop 转换为字符串：
-- -------------------- ---- -------
----- ------------------- - ------------------ -- -
------ ----- ------- --------------- -
--------------- - ------ -- ---- - ----- - -----
-------- -
----- - --------- ------------------- - - -----------
------ -
-----------------
-----------------------------------------
---------------------
--
--
-
-
--现在，我们可以编写一个使用 Enzyme 模拟数据和方法和属性断言的测试，以确保包装组件在逻辑上正确：
-- -------------------- ---- -------
------------------------------- -- -- -
----- ------------- - -- --------- -------- -- -- -
---- ---------------------------
--
---------- ---- ------- ----- ---- --- ----------- -- -- -
----- ------- - --------
--------------------
--------------------------------
----------------------
----------------
--
--
----- ------------- - ----------------------------
----------------------------------------
--------------------------------------------------------------
-----------------------------------------------------
---
---在这个测试套件中，我们首先创建一个 MockComponent，并使用 withBooleanToString 包装它。然后，我们创建了一个 Enzyme 的 wrapper 对象，并验证了以下内容：
- wrapper 是否包含正确的 mock 组件；
- wrapper 中的 mock 组件是否有正确的 props，包括 boolProp；
- 当 boolProp 设置为 false 时，包装组件是否返回 No。
总结
在本文中，我们探讨了如何使用 Enzyme 进行 React 高阶组件的测试。我们发现，在测试 HOC 时，我们需要考虑注入的 props 是否正确，以及如何通过模拟数据和方法和属性断言来测试更复杂的 HOC。在实践中，你可能会发现一些其他的挑战和解决方案，但是了解如何使用 Enzyme 可以帮助测试更健壮的 React 应用。
完整示例代码，可以在 CodeSandbox 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2a26c48841e9894ecc448