Как смоделировать импортный компонент React высшего порядка с помощью шутки и энзима?

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, чтобы вернуть фиктивную оболочку. Вот где я сейчас нахожусь с тестом и получаю "TypeError: не функция" в части compose файла withWrapper.js. Я также пробовал другие способы издеваться, но продолжаю получать ошибки и до сих пор не получил нигде.

Как я буду насмехаться над импортными HOC?

Answer 1

Это мой общий макет HOC. Надеюсь, это то, что вы искали.

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