Unable to test HOC containing hooks using React testing library

Question

Below is the code for HOC

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

Below is the test to render HOC-

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

Getting the error- Invalid hook call. React hooks must be called inside react functional component.

Right now there are no hooks in your code. What is Component and SomeOtherComponent respectively? Are they the same? — gqstav
– gqstav, Commented Apr 13, 2020 at 10:10
useQuery() is the hook. These are two separate component.The HOC is working perfectly on UI , however i am unable to write the test for same. — Prerna shah
– Prerna shah, Commented Apr 13, 2020 at 10:11
Ah! Then you should be able to fix this by moving const id = useQuery(query); out of the return () => {...} statement. — gqstav
– gqstav, Commented Apr 13, 2020 at 10:15

johnny peter · Accepted Answer · 2020-04-17 18:26:05Z

1

It should be as follows

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

You cant call a component as a function if it contains hooks.

answered Apr 17, 2020 at 18:26

johnny peter

4,8701 gold badge28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to test HOC containing hooks using React testing library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related