react-hooks-testing-library: Cannot read properties of undefined (reading 'current')

  • @testing-library/react-hooks version:7.0.2
  • react version:18.0.0-alpha-5ca4b0433-20211020
  • react-dom version (if applicable):18.0.0-alpha-5ca4b0433-20211020
  • react-test-renderer version (if applicable):17.0.1
  • node version:16.13.0
  • npm (or yarn) version: yarn version => 1.22.15
  • typescript version: ~4.4

Relevant code or config:

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

function useTest() {
    return { res: true }
}

describe('useTest', () => {
    it('should render', () => {
        const { result } = renderHook(() => useTest());
    });
});

What you did:

This is part of a Blitz.js app. This is a very minimal example. I started testing a more complex custom hook and i got in first place TypeError: Cannot read properties of undefined (reading ‘current’) so i decided to tear down to a bare minimal example.

What happened:

yarn test --verbose -t "useTest"
yarn run v1.22.15
$ jest --verbose -t useTest
 FAIL   CLIENT  app/githubs/hooks/useQueryBuilder.hook.test.ts
  useTest
    ✕ should render (7 ms)

  ● useTest › should render

    TypeError: Cannot read properties of undefined (reading 'current')

       7 | describe('useTest', () => {
       8 |     it('should render', () => {
    >  9 |         const { result } = renderHook(() => useTest());
         |                            ^
      10 |     });
      11 | });
      12 |

      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15259:59)
      at renderHook (node_modules/@testing-library/react-hooks/lib/pure.js:148:30)
      at Object.<anonymous> (app/githubs/hooks/useQueryBuilder.hook.test.ts:9:28)

Test Suites: 1 failed, 5 skipped, 1 of 6 total
Tests:       1 failed, 20 skipped, 21 total

Reproduction:

Problem description:

Blitz.js comes with @testing-library/react-hooks:4.0.1 so i upgraded to 7.0.2 but nothing change.

Suggested solution:

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 19 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I have a same problem.

(my react version is 18.1.0)

so I upgraded “react-test-renderer” 17.0.2 to 18.1.0 and it works!

  1. We don’t officially support React 18, and we likely never will. You should instead try the new renderHook API from react-testing-library (see here for details)
  2. I suspect the issue here is that you have not updated react-test-renderer to react 18 as well (the stack trace points to that as the detected renderer, but you are posting react-dom versions). Please see our docs about targeting specific renderers if you intend to use react-dom going forward.

Thank,

with these packages works as expected (react-dom removed)

 "react": "^18.0.0-rc.0",
"react-test-renderer": "^18.0.0-rc.0",

We don’t officially support React 18, and we likely never will. You should instead try the new renderHook API from react-testing-library (https://github.com/testing-library/react-testing-library/pull/991)

Please consider marking this library deprecated and putting a prominent warning at the top of your readme

Thank,

with these packages works as expected (react-dom removed)

 "react": "^18.0.0-rc.0",
"react-test-renderer": "^18.0.0-rc.0",

A bit late, my apologies. Removing react-dom will break everithing in my case:

Cannot find module 'react-dom' from 'node_modules/react-query/lib/react/reactBatchedUpdates.js'

I can confirm that upgrading react-test-renderer to ^18.0.0-rc.0 solve the issue.

Does this still happen if its not part of the blitz app? i.e a standalone repo.

react-test-renderer needs to be the same version as your react package version. Example: react: 18.1.0 so react-test-renderer: 18.1.0

@LearningProcesss yes, don’t remove react-dom if it is required. You may want to consider removing react-test-renderer instead if you are only using it for @testing-library/react-hooks as we will pick up and use react-dom instead if it is available.

If both are still required for other reasons, then either need to keep their versions in sync or be specific about which renderer you want to use going forward.