如何使用ReactJS、Enzyme和Jest测试高阶组件（HOC）？

嘿，我来帮你搞定这个HOC测试的难题！首先咱们先拆解你遇到的两个核心问题：一是渲染时的propTypes报错，二是如何测试HOC包装后组件的交互逻辑。

先解决渲染报错的问题 #

你看到的Error: failed the prop type name，根源很简单：你的Test组件要求name是必填的string类型，但你的HOC并没有把这个prop传递给被包装的Test组件。

要修复这个，只需要让HOC把它接收到的所有props都透传给被包装组件就行，修改你的HOC代码：

const test = WrappedComponent => {
  return class extends Component {
    state = { value: 0 }
    increment = () => {
      this.setState({ value: this.state.value + 1 });
    }
    render() {
      // 用展开运算符透传所有父组件传入的props
      return (
        <WrappedComponent 
          increment={this.increment} 
          value={this.state.value} 
          {...this.props} // 新增这一行，透传props
        />
      );
    }
  }
}

然后在测试里给容器组件传递name prop，渲染就不会报错了：

it("renders without crashing", () => {
  const Container = test(Test);
  shallow(<Container name="my-test-component" />);
});

测试组件的交互逻辑（点击按钮数值增加） #

接下来咱们测试点击按钮后数值是否增加，这里分两种场景：

1. 直接测试包装后的容器组件 #

你可以直接渲染HOC生成的容器组件，模拟按钮点击，然后验证渲染的数值变化：

it("increments value when button is clicked", () => {
  const Container = test(Test);
  const wrapper = shallow(<Container name="test" />);
  
  // 初始状态下数值是0
  expect(wrapper.text()).toContain("0");
  
  // 找到按钮并模拟点击
  wrapper.find("button").simulate("click");
  
  // 点击后数值应该变成1
  expect(wrapper.text()).toContain("1");
});

2. 验证被包装组件是否正确接收props #

如果你想确认Test组件确实收到了HOC传递的value、increment以及透传的name，可以用Enzyme的dive()方法深入到被包装的子组件：

it("passes correct props to the wrapped Test component", () => {
  const Container = test(Test);
  const wrapper = shallow(<Container name="test-name" />);
  
  // 深入到被包装的Test组件
  const testComponent = wrapper.dive();
  
  // 检查props是否符合预期
  expect(testComponent.props().value).toBe(0);
  expect(typeof testComponent.props().increment).toBe("function");
  expect(testComponent.props().name).toBe("test-name");
});

额外小提示 #

• 如果你只想测试Test组件本身的逻辑，完全可以跳过HOC，直接给它传递模拟的value和increment函数，这样测试更聚焦：

it("displays the passed value and calls increment on button click", () => {
  const mockIncrement = jest.fn();
  const wrapper = shallow(<Test value={5} increment={mockIncrement} name="test" />);
  
  expect(wrapper.text()).toContain("5");
  wrapper.find("button").simulate("click");
  expect(mockIncrement).toHaveBeenCalledTimes(1);
});

内容的提问来源于stack exchange，提问作者jm18457