Question

我有一个HOC，仅当isEntityValid（）为true时才呈现包装的组件：

export default WrappedComponent => {
  return class EntityConsumer extends Component {
    render() {
      return isEntityValid() && <WrappedComponent {...this.props} />;
    }
  };
};

我包装的组件的export default语句如下：

export default withEnity(SomeComponent);

SomeComponent在添加withEnity HOC之前已经编写了单元测试用例，

  const wrapper = shallow(<SomeComponent {...props} />);
  const doneButton = wrapper.find(".footer_button");

我应该如何调整测试以使它们仍然通过？：

Answer 1

您也可以导出展开的组件

export default withEnity(SomeComponent);
export { SomeComponent as PureSomeComponent };

然后对其进行测试

Import { PureSomeComponent as SomeComponent};

Answer 2

这是我通常自己做的方式：

export default WrappedComponent => {
  class EntityConsumer extends Component {
    render() {
      return isEntityValid() && <WrappedComponent {...this.props} />;
    }
  };
  EntityConsumer.WrappedComponent = WrappedComponent;
  return EntityConsumer;
};

然后稍后再进行测试

const wrapper = shallow(<SomeComponent.WrappedComponent {...props} />);
const doneButton = wrapper.find(".footer_button");

如何测试HOC中包装的组件？

2 个答案: