javascript - 用 Jest 模拟高阶组件

Question

我想确保 HOC 组件被 Jest 调用，但我似乎无法让 jest.mock 工作。我的 HOC 是这样的:

const withEntity = (
  ...args
) => {
  const wrappedComponent = WrappedComponent => {
    const innerComponent = ({ ...props }) => {    
      return (
        <WrapperComponent
          {...props}
        >
          <WrappedComponent />
        </WrapperComponent>
      );
    };

    innerComponent.propTypes = {
      ...
    };

    return innerComponent;
  };

  wrappedComponent.propTypes = {
    ...
  };

  return wrappedComponent;
};

withEntity.propTypes = {
  ...
};

export default withEntity;

在一个单独的文件中，withEntity 函数是这样调用的:

export const DoSomething = withEntity(...args)(MyComponent);

然后，在 DoSomething 组件的测试文件中，我尝试导入 withEntity 函数并像这样模拟它:

import withEntity from "../../../shared/entity/higher_order_components/withEntity";
jest.mock("../../../shared/entity/higher_order_components/withEntity");

但是当我真正尝试运行测试时，我得到了这个错误:

  ● Test suite failed to run

    TypeError: (0 , _withEntity.default)(...) is not a function

不确定该错误是怎么回事，我在这里做错了什么？

Answer 1

模拟你的 HOC 应该是这样的:

jest.mock('../your/HOC', () => () => 
    Component => props => <Component {...props} /> 
)

可以读作:

jest.mock('../your/HOC', () => `

创建一个返回您的 HOC 函数的模拟，

() => 

返回你的 HOC 的函数又名 withEntity(...args),

Component => props => <Component {...props} /> 

HOC 本身，它是一个获取组件并返回一个获取 props 的函数，并返回一个返回带有其 props 的渲染组件的函数。