2

我正在为一个项目编写一个模块，该项目是一个包含多个 HOC 的应用程序的 HOC（使用 recompose compose 函数）。我试图测试高阶组件实际上是在包装我的应用程序。

包含 HOC 的示例节点包

//withHOC.js
const withHOC = props => WrappedComponent => moreProps => {
    class HOC extends Component {
        //logic
        render () {
            return <WrappedComponent {...moreProps} />
        }
    }
}
export default withHOC

我的 HOC 使用上述命名空间的 HOC 包装传递的组件

//withWrapper.js
import withHOC from '@HOC/withHOC'
import { compose } from 'recompose'
...etc
const withWrapper = props => WrappedComponent => {
    const innerWrapper => moreProps => (
        <WrappedComponent {...moreProps} />
    );

    const enhance = compose(
        withHOC,
        withHOC1,
        withHOC2,
    );
    return enhance(innerWrapper);
}
export default withWrapper;

测试 withWrapper.js

//withWrapper.test.js
jest.mock('@HOC/withHOC', () => ({
   withWrapper: (Component) => <div id="test"><Component /></div>
}));
import withWrapper from '@HOC/withHOC' 

const TestApp = () => <div>I am a test element</div>
const EnhancedApp = withWrapper(TestApp)
const wrapper = mount(<EnhancedApp />)
describe('test', () => {
    it('withHOC should wrap the app', () => {
        expect(wrapper.find('#test').length).toEqual(1)
    }
}

我正在尝试单独测试我的应用程序，并尝试模拟每个 HOC 以返回一个虚拟包装器。这是我目前正在进行测试的地方，并且在 withWrapper.js 的撰写部分中收到“TypeError：不是函数”。我也尝试过其他模拟方法，但不断出错，仍然没有得到任何地方。

我将如何模拟进口的 HOC？

4

1 回答 1

2

这是我的通用 HOC 模拟。我希望这就是你要找的。

jest.mock("@HOC", () => {
  return {
    withHOC: () => {
      return (Component) => {
        return (props) => {
          return <Component newProp={jest.fn} {...props} />;
        };
      };
    },
  };
});
于 2020-12-10T15:55:29.537 回答