testing-library/react-hooks-testing-library

renderHook() results in: Warning: ReactDOM.render is no longer supported in React 18.

alxlacayo opened this issue · 4 comments

alxlacayo commented

I'm getting the React 18 createRoot warning when using renderHook. I've updated my app to react 18 already and have the latest testing library installed. Does anyone know the solution to this?

import { renderHook } from "@testing-library/react-hooks";

test("should autoconnect", async () => { 
    const { result, waitForNextUpdate } = renderHook(() => useConnectionService(ethereumProviders, storageService));
    await waitForNextUpdate();
    expect(result.current[0].account).not.toBeNull();
});

Results in     console.error
      Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
mpeyper commented

Please see the note in the README about react 18 support.

The RTL PR has been merged now, so if you’ve updated your app and other tests to React 18, you should be ready to migrate your renderHook imports to @testing-library/react now too.

  • 👍1
  • ❤️2
scssyworks commented

I am still getting the warning An update to TestComponent inside a test was not wrapped in act(...)

I tried wrapping renderHook inside an act but in TypeScript I get following error:

let hook: RenderHookResult<any,any>;
act(() => {
  hook = renderHook(myHook);
});
const { result } = hook; // Here I get typescript error saying: "Trying to use variable before it's assigned"
LoveMeWithoutAll commented

It would be worked.

import { renderHook, waitFor } from '@testing-library/react';

it('test', async () => {
    jest
      .spyOn(adminService, 'getNotice')
      .mockImplementation(() => Promise.resolve({} as NoticeResponse));
    const { result } = renderHook(() => useGetNotice('123'), { wrapper });
    await waitFor(() =>
      expect(result.current.data).toStrictEqual({} as NoticeResponse),
    );
  });
seyhak commented

Please see the note in the README about react 18 support.

The RTL PR has been merged now, so if you’ve updated your app and other tests to React 18, you should be ready to migrate your renderHook imports to @testing-library/react now too.

Yeah, I changed import { renderHook, act } from '@testing-library/react-hooks';
to import { renderHook, act } from '@testing-library/react';
and the error disappeared

  • 👍3