Cannot read properties of undefined (reading 'current')

[LearningProcesss]

• @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:

[joshuaellis]

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

[smmoosavi]

yes, I run tests with jest

    TypeError: Cannot read property 'current' of undefined

    >  7 |     const { result } = renderHook(() => {
         |                        ^

      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15251:59)
      at render (node_modules/@testing-library/react-hooks/lib/native/pure.js:73:34)
      at Object.renderHook (node_modules/@testing-library/react-hooks/lib/core/index.js:114:5)

versions:

  "@testing-library/react-hooks": "^8.0.0-alpha.1",
  "react": "^18.0.0-rc.0",
  "react-dom": "^18.0.0-rc.0",

[mpeyper]

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.

[smmoosavi]

Thank,

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

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

[joshuaellis]

It sounds like this issue is resolved, but @smmoosavi if we need to revisit the issue we can reopen.

[LearningProcesss]

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.

[mpeyper]

@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.

[LearningProcesss]

@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.

Got it, Thank you

[joshribakoff-sm]

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

[144mdgross]

I am also seeing this issue on v8.0.0 and react v16.8.x I just started writing tests so my code is nearly identical to the original example. On a separate project I'm also working on we're using react v16.8.6 and @testing-library/react-hooks v4.0.0 without issue. I am going to try downgrading and see if that solves my issue but wanted to share.

slightly obscured example:

  it('works?', () => {
    const { result } = renderHook(() =>
      useThisHook(),
    );
  });
});

error:

TypeError: Cannot read property 'current' of undefined
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14915:57)
      at render (node_modules/@testing-library/react-hooks/lib/native/pure.js:73:34)
      at renderHook (node_modules/@testing-library/react-hooks/lib/core/index.js:114:5)
      at Object.<anonymous> (src/dashboard/hooks/useThisHook.spec.ts:11:24)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:387:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

package.json

  "peerDependencies": {
     ...
    "react": "16.8.x",
    "react-dom": "16.8.x"
  },
"devDependencies": {
    ...
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^12.0.0",
    "@testing-library/react-hooks": "^8.0.0",
    ...
    }

[min9nim]

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!

[iulianalbu]

Thank,

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

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

Thank you! Works! Basically, react@latest & react-test-renderer@latest now...

[wolfgangmeyers]

I just now got this error after using create-react-app on windows and running yarn test

[wolfgangmeyers]

upgrading react-dom to the latest version resolved for me

[najumasad]

TypeError: Cannot read properties of undefined (reading 'debug') const {debug,getByTestId} = render() please help me to solve it @mdjastrzebski @smmoosavi @wolfgangmeyers @min9nim @144mdgross @mpeyper I'm runing a simple test case in react native cli

const App = () => Hello; describe('', () => { test('should render without crashing', () => { const {toJSON,debug} = render() }); })

My package.json { "name": "abc", "version": "1.0.8", "private": true, "scripts": { "android": "react-native run-android --variant=playStoreDebug", "ios": "react-native run-ios", "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'", "start": "react-native start", "test": "jest --config=./jest.config.js", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "pretty": "prettier --write 'src/*/.{tsx,ts,js}'", "generate-bundle": "react-native bundle --platform android --dev false --bundle-output android/app/src/main/assets/index.android.bundle --entry-file index.js" }, "dependencies": { "@babel/runtime": "^7.21.5", "@hmscore/react-native-hms-push": "^6.7.0-300", "@invertase/react-native-apple-authentication": "^2.2.2", "@react-native-community/checkbox": "^0.5.15", "@react-native-community/netinfo": "^9.3.10", "@react-native-firebase/analytics": "^17.5.0", "@react-native-firebase/app": "^17.5.0", "@react-native-firebase/auth": "^17.5.0", "@react-native-firebase/crashlytics": "^17.5.0", "@react-native-firebase/messaging": "^17.5.0", "@react-native-firebase/remote-config": "^17.5.0", "@react-native-google-signin/google-signin": "^9.1.0", "@react-native-masked-view/masked-view": "^0.2.9", "@react-navigation/bottom-tabs": "^6.5.7", "@react-navigation/native": "^6.1.6", "@react-navigation/stack": "^6.3.16", "@reduxjs/toolkit": "^1.9.5", "axios": "^1.4.0", "force": "^0.0.3", "i18next": "^22.5.0", "lottie-ios": "3.4.0", "lottie-react-native": "^5.1.6", "metro-react-native-babel-preset": "^0.76.5", "promise": "^8.3.0", "react": "18.2.0", "react-native": "0.71.8", "react-native-appsflyer": "^6.10.3", "react-native-config": "^1.4.11", "react-native-device-info": "^10.3.0", "react-native-fast-image": "^8.6.3", "react-native-fbsdk-next": "^10.1.0", "react-native-freshchat-sdk": "^4.2.0", "react-native-gesture-handler": "^2.10.1", "react-native-get-random-values": "^1.8.0", "react-native-gradle-plugin": "^0.71.18", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.6.2", "react-native-pager-view": "^6.2.0", "react-native-permissions": "^3.8.0", "react-native-portalize": "^1.0.7", "react-native-render-html": "^6.3.4", "react-native-restart": "0.0.27", "react-native-safe-area-context": "^4.5.3", "react-native-screens": "^3.20.0", "react-native-webengage": "^1.3.0", "react-native-webview": "^12.0.3", "react-navigation": "^4.4.4", "react-redux": "^8.0.5", "uuid": "^9.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@react-native-community/eslint-config": "^3.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-native": "^5.4.2", "@testing-library/react-native": "^12.1.2", "@types/jest": "^29.5.1", "@types/react-test-renderer": "^18", "@typescript-eslint/eslint-plugin": "^5.59.7", "@typescript-eslint/parser": "^5.59.7", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^29.5.0", "eslint": "^8.41.0", "@types/react": "~18.2.6", "jest": "^29.3.0", "jest-environment-node": "^29.5.0", "jest-expo": "^48.0.2", "jest-fetch-mock": "^3.0.3", "jest-native": "^3.0.0", "json-format": "^1.0.1", "prettier": "^2.8.8", "react-native-clean-project": "^4.0.1", "react-native-codegen": "0.71.5", "react-test-renderer": "18.2.0", "typescript": "^5.0.4" }, "jest": { "preset": "react-native", "moduleFileExtensions": [ "ts", "tsx", "js", "jsx", "json", "node" ], "detectOpenHandles": true } }

[mpeyper]

@najumasad it looks like your test is using @testing-library/react-native and not this library. Please raise an issue with them instead.

[buuhvprojects]

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

[mdjastrzebski]

@najumasad in order to help you with your problem you'll need to submit a minimal reproduction repository so we can reproduce your issue locally. Pls use ours examples/basic as a base for such tests.

[datxuantran]

@testing lib, react and react-hooks resolution conflict