Question

我为一个项目编写了一个模块，该项目是一个HOC，它使用多个HOC包装应用程序（使用重构撰写功能）。我试图测试更高阶的组件实际上是在包装我的应用程序。

包含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以返回一个虚拟包装器。这是我目前正在进行测试的地方，我得到了＆＃39; TypeError：不是一个函数＆＃39;在withWrapper.js的撰写部分。我也尝试过其他模拟方法，但不断收到错误，但仍然没有得到任何结果。

我如何嘲笑进口的HOC？

Answer 1

这是我的通用HOC模拟。我希望这就是您想要的。

jest.mock("@HOC", () => {
  return {
    withHOC: () => {
      return (Component) => {
        return (props) => {
          return <Component newProp={jest.fn} {...props} />;
        };
      };
    },
  };
});

如何使用jest＆amp;模拟导入的React高阶组件酶？

1 个答案: