Warning: ReactDOM.render is no longer supported in React 18.

[pgarciacamou]

What is your question:

Is there a way to remove the Warning: ReactDOM.render is no longer supported in React 18. warning from @testing-library/react-hooks -> renderHook?

Related PRs:

1. Package to support React 18 #654
2. Support for React 18 react-testing-library#509

---

As suggested in some blog posts and some GitHub issues, I upgraded react-testing library to support React 18 createRoot:

npm i --save-dev @testing-library/jest-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest

    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "13.1.1",
    "@testing-library/react-hooks": "8.0.0",

But I keep getting this warning:

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

When I do:

import { renderHook } from '@testing-library/react-hooks'
import { someHook } from '../'

test('...', () => {
  const { result } = renderHook(() => someHook())
})

The screenshot below shows a barebones test using @testing-library/react-hooks without any gimmicks and it throws a warning.

Notice that I do not get this warning when using @testing-library/react. The screenshot below shows a barebones component that uses a hook and doesn't throw a warning.

[pgarciacamou]

Oh, am I just a little too late to the party: https://github.com/testing-library/react-hooks-testing-library#a-note-about-react-18-support and also this?

[pgarciacamou]

My bad.

Evidently, I was just not aware of the change: https://testing-library.com/docs/react-testing-library/api/#renderhook.

testing-library/react-testing-library#991 (comment)

import { renderHook } from '@testing-library/react' // <-- NOW

test('returns logged in user', () => {
  const { result } = renderHook(() => useLoggedInUser())
  expect(result.current).toEqual({ name: 'Alice' })
})