Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pgarciacamou opened this issue May 1, 2022 · 2 comments
Closed

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

pgarciacamou opened this issue May 1, 2022 · 2 comments
Labels
question Further information is requested

Comments

@pgarciacamou
Copy link

pgarciacamou commented May 1, 2022

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.

Screen Shot 2022-05-01 at 12 13 32 PM

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.

Screen Shot 2022-05-01 at 12 29 49 PM

@pgarciacamou pgarciacamou added the question Further information is requested label May 1, 2022
@pgarciacamou
Copy link
Author

@pgarciacamou
Copy link
Author

pgarciacamou commented May 1, 2022

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' })
})

Screen Shot 2022-05-01 at 12 56 17 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant