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

Question

I have an npm monorepo which contains web apps (React 18), mobile apps (React-Native 0.71/React 18) and shared libraries. I am also using npm overrides to fix React versions, this has not changed. After some updates, when I run Jest tests I get the following error in just one of my projects:

 FAIL  hooks/useFoo.test.tsx
  ● Test suite failed to run

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

    > 1 | import { create, snapshotOf } from "jest-snapshot-propifier";
        | ^
      2 | import { useCallback as useCallbackLib } from "react";
      3 | import {
      4 |     useDispatch as useDispatchLib,

      at ReactCurrentOwner (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:496:46)
      at Object.<anonymous> (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18643:4)
      at Object.require (../../node_modules/react-test-renderer/index.js:6:20)
      at Object.<anonymous> (hooks/useFoo.test.tsx:1:1)

All the detailed answers I can find are 5 years old and talk of version mismatches between React, React-Dom and React-Test-Renderer. But I don't think this is the case for me, or at least I don't think it is:

$ npm ls react-test-renderer react react-dom

├─┬ @common/[email protected] -> ./common/lib
│ ├─┬ @reduxjs/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ └── [email protected]
...
├─┬ [email protected]
│ ├── [email protected] deduped
│ └── [email protected] deduped
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected] deduped invalid: "17.0.2" from node_modules/bar //this is from the overrides in my root p.j
  └── [email protected] deduped

Is this the same issue as the 5yr old ones, and if so how/why?

Answer 1

I solved this problem via poking around in the node_modules

node_modules/react-test-renderer/cjs/react-test-renderer.development.js


21| var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
22| console.log("", React)

Printed

     {
      useCallback: [Function: mockConstructor] {
        _isMockFunction: true,
        getMockImplementation: [Function (anonymous)],
        mock: [Getter/Setter],
        mockClear: [Function (anonymous)],
        mockReset: [Function (anonymous)],
        mockRestore: [Function (anonymous)],
        mockReturnValueOnce: [Function (anonymous)],
        mockResolvedValueOnce: [Function (anonymous)],
        mockRejectedValueOnce: [Function (anonymous)],
        mockReturnValue: [Function (anonymous)],
        mockResolvedValue: [Function (anonymous)],
        mockRejectedValue: [Function (anonymous)],
        mockImplementationOnce: [Function (anonymous)],
        mockImplementation: [Function (anonymous)],
        mockReturnThis: [Function (anonymous)],
        mockName: [Function (anonymous)],
        getMockName: [Function (anonymous)]
      }
    }

And there was the problem (although I don't know why it had changed)

Back in the test file:

jest.mock("react", () => ({
    useCallback: jest.fn()
}));

just needed to updating to

jest.mock("react", () => ({
    ...jest.requireActual("react"),
    useCallback: jest.fn(),
}));