Provider dependent custom hook test generating console errors

[rafalmeidas]

• react-testing-library version: 13.3.0
• react version: 18.0.9
• node version: 16.14.2
• npm version: 8.5.0

Relevant code or config:

const useSelectedThemeContext = () => {
  const context = useContext(SelectThemeContext);

  if (isEmptyObject(context)) {
    throw new Error(
      "You have to use useSelectThemeContext inside <SelectThemeContextProvider />",
    );
  }

  const { theme, toggleTheme } = context;
  return { theme, toggleTheme };
};

export default useSelectedThemeContext;

What you did:

I'm trying to implement a custom hook which must be used together with a Provider, if it is used in a component that does not use the Provider it should throw an error

What happened:

The test is working, but it generates an error in the console.

Test

  it("[ACAMP-03] - should return error message when trying to use custom hook without provider", () => {
    let message: string;
    try {
      renderHook(() => useSelectedThemeContext());
      message = "";
    } catch (e: any) {
      message = e.message;
    }

    expect(message).toEqual(
      "You have to use useSelectThemeContext inside <SelectThemeContextProvider />",
    );
  });

Log

at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)

    console.error
      The above error occurred in the <TestComponent> component:
      
          at TestComponent (C:\Users\rafael.almeida\Documents\Projects\Estudo\acamp\base-reactv18-eslint-prettier-config\node_modules\@testing-library\react\dist\pure.js:281:5)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:18687:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:18720:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:13923:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:13944:9)
      at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23391:13)

If I try to render the custom hook to get the result it already breaks and I don't have the possibility to access the result.error.message.

I noticed that I don't have access to this property of result.

Is there any way I can test this without generating errors in the console?

Problem description:

I believe that if the test is passing it should not receive errors in the test console.

CodeSandBox

CodeSandBox

[mpeyper]

Hey @rafalmeidas,

You are using renderHook from @testing-library/react and not @testing-library/react-hooks which is correct for React 18, but comes with a leaner API (e.g. no result.error property).

I’ll transfer this issue to their repo for you to get their thoughts on the console errors, but for what it’s worth, react is very noisy in the console around errors, even when using things like error boundaries, so your only option might be to manually suppress console errors in your test.

[rafalmeidas]

Hi, @mpeyper, thanks veru much for anwser!

[eps1lon]

Closing this in favor of testing-library/testing-library-docs#1060

I'd like to start with a documented pattern first before building any API around it.