Невозможно протестировать HO C содержащие хуки с помощью библиотеки тестирования React

Question

Ниже приведен код для HO C

const HOC = ({ component: Component }) => {
  return () => {
     const id = useQuery(query);
     return (<div> 
         {!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
     </div>)
  }
}

Ниже приведен тест для отрисовки HO C -

const myComponent = () => <div data-testid={'component-testid'}>ABC</div>;
    const renderHOC = HOC({component: myComponent})();
    const {getByTestId} = render(renderHOC);
    expect(getByTestId('component-testid')).toBeInTheDocument();

Получение сообщения об ошибке - неверный вызов ловушки. Реактивные хуки должны вызываться внутри реактивного функционального компонента.

Answer 1

Это должно быть следующим образом

const RenderHOC = HOC({component: myComponent});
const { getByTestId } = render(<RenderHOC />);

Невозможно вызвать компонент как функцию, если он содержит хуки.