How to test Component which requires hook using react testing library?

Question

I have built a component which requires a methods and data supplied by custom hook

const MyComponent = () => {
  const { data, methods } = useMyCustomHook({ defaultValues: defaultValues });

  return <MyAnotherComponent data={data} label="Some Text" method={methods} />;
}

I am writing test using react testing library to test MyComponent or to be more specific to test MyAnotherComponent

Here is my testing code

test("Test MyAnotherComponent Label", () => {
  const { data, methods } = useMyCustomHook({ defaultValues: defaultValues });
  render(
    <MyAnotherComponent
      data={data}
      label="Some Text"
      method={methods}
    />
  );
  expect(screen.getByLabelText("Some Text")).toBeInTheDocument();
});

My testcase fails with an error saying Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

I have looked up for solutions but some are too simple and some are too complex. Thanks in advance

Error seems pretty self-explanatory, no? You're calling a hook outside the body of a function component in your test case. Just render the component. — ggorlen
– ggorlen, Commented Aug 4, 2022 at 22:52
Rendering the component doesn't work either. It will cause useContext error in the test. I'm working through this myself. — John LaBarge
– John LaBarge, Commented Mar 10, 2023 at 14:25

ddm · Accepted Answer · 2022-08-04 22:56:08Z

1

The error is caused by the fact that you are calling the hook inside a function, not inside a React component. Since you only want to test MyAnotherComponent, I don't see why you'd need to call the hook and not mock the data and methods directly to pass them to MyAnotherComponent because what you are currently doing is to re-write MyComponent.

answered Aug 4, 2022 at 22:56

ddm

1022 bronze badges

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

Collectives™ on Stack Overflow

How to test Component which requires hook 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