Enzyme 如何测试 React 中的 HOC

React 中的高阶组件（Higher-order components，简称 HOC）是一种常见的设计模式，用于复用组件逻辑和状态，使得组件结构更加灵活。然而，在编写 HOC 的过程中，如何进行测试是一个有挑战性的问题。

本文将介绍 Enzyme，一个 React 组件测试库，以及如何使用 Enzyme 来测试 React 中的 HOC。

安装 Enzyme

首先，需要安装 Enzyme 和对应的适配器（针对所使用的 React 版本）。假设我们使用的是 React 16：

npm install --save-dev enzyme enzyme-adapter-react-16

然后，在测试文件中引入 Enzyme：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

现在，我们就可以使用 Enzyme 来测试 React 组件了。

测试 HOC

下面，我们将简单介绍如何编写一个 HOC，并使用 Enzyme 来进行测试。假设我们编写了一个 HOC，用于在组件挂载时记录日志：

function withLogging(WrappedComponent) {
  class WithLogging extends React.Component {
    componentDidMount() {
      console.log(`[${WrappedComponent.name}] mounted`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  WithLogging.displayName = `withLogging(${WrappedComponent.displayName || WrappedComponent.name})`;

  return WithLogging;
}

现在，我们将创建一个测试用例，测试这个 HOC 是否能够正确地记录日志：

it('logs when wrapped component mounts', () => {
  const WrappedComponent = () => <div />;
  const WithLogging = withLogging(WrappedComponent);
  const wrapper = mount(<WithLogging />);
  expect(console.log).toHaveBeenCalledWith('[WrappedComponent] mounted');
});

这个测试用例使用了 Enzyme 提供的 mount 方法，将 WithLogging 渲染为真实的 DOM 元素，并检查是否成功调用了 console.log 方法。

值得注意的是，我们在 HOC 中手动添加了一个 displayName 属性，这是为了使 Enzyme 在调试时能够正确显示组件的名称。如果 HOC 没有手动添加 displayName，则 Enzyme 可能无法正确显示组件名称，导致测试用例失败。

总结

在本文中，我们介绍了 Enzyme 如何测试 React 中的 HOC。通过使用 Enzyme 提供的 mount 方法，我们可以轻松地检查 HOC 是否能够正确地处理组件逻辑和状态。

当需要在 React 中编写 HOC 时，可以借助 Enzyme 来进行测试，以确保 HOC 的正确性和稳定性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659def21add4f0e0ff712879