TypeError: (0 , _react.cache) is not a function

[nicholasgriffintn]

Summary

When testing components that use React Cache, the following error is returned:

  ● Test suite failed to run

    TypeError: (0 , _react.cache) is not a function

      2 | import { cache } from 'react';
      3 |
    > 4 | const client = cache(() => new Client());

Anyone know the resolution to this? I tried stubbing it but that says the property doesn't exist as well.

I'm just presuming none of this React canary stuff has been tested? There are no docs on any of the RSC or other canary items anyway, which is slightly annoying considering this is apparently stable, not sure I can agree if this is not testable...

Additional information

No response

Example

No response

[SurfaceW]

I figure out a way to solve this problem with jest.config.js 👇🏻

const nextJest = require('next/jest');

// Providing the path to your Next.js app which will enable loading next.config.js and .env files
// @ts-ignore
const createJestConfig = nextJest?.default({ dir: './' }) || nextJest({ dir: './' });
 
// Any custom config you want to pass to Jest
const customJestConfig = {
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: {
    // 🧑🏻‍🔧 FIX Problem here
    // 🧑🏻‍🔧 resolve react module with the next.js inset one.
    react: 'next/dist/compiled/react/cjs/react.development.js',
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

const configs = createJestConfig(customJestConfig);
module.exports = configs;

[DK-Stern]

If i do this i get following error: TypeError: (0 , _jsxruntime.jsx) is not a function
Can you please share your projects test setup?

[SurfaceW]

As you can see the code above, I haven't used jest.setup file for project setup. Make sure your NODE ENV is development this seems to the error-cause.

[DK-Stern]

I figured out my mistake, i didn't used react canary version in my dependencies. Now everything is fine. :)

[jinbaek78]

thank you SurfaceW. It helped a lot. the solution you provided is works for me😄. I was testing some components using react cash hook. but I thought it was because of partial mock at first. but it turned out It's because of mapper of react.

[mattfc-ct]

Following up on this (very stale) thread, to help future people with this issue. It did NOT resolve my issue, as I had the same TypeError: (0 , _jsxruntime.jsx) is not a function error that @DK-Stern had. I would recommend following the other approach in this thread to conditionally not use the React cache in tests.

[seogki]

It was annoying for me as well. I did not used react canary version, just decided to bypass cache only for test

and this is how i handled, in case somebody need it

1. check if node_env is test
2. and switch actual react.cache to my testCache function so that i can bypass it

const isNotTest = process.env.NODE_ENV !== "test";

function testCache<T extends Function>(func: T) {
  return func;
}
const cachedFunc = isNotTest ? cache : testCache;

and just use cachedFunc to which ever function you want to apply

export const test= cachedFunc(() => {
  ...
});

[ldavid44]

I don't use canary either, but the best approach I found was to mock the cache inside the jest.setup.ts

const testCache = <T extends Function>(func: T) => func

jest.mock('react', () => {
    const originalModule = jest.requireActual('react')
    return {
        ...originalModule,
        cache: testCache,
    }
})

[Marcosld]

Got your solution working by changing it a bit:

jest.mock('react',` () => {
    const testCache = <T extends (...args: Array<unknown>) => unknown>(func: T) => func;
    const originalModule = jest.requireActual('react');
    return {
        ...originalModule,
        cache: testCache,
    };
});

If I defined the testCache function in the outer scope it didn't work due to jest hoisting

[Imunal]

For anyone using vitest:

vi.mock("react", async (importOriginal) => {
    const testCache = <T extends (...args: Array<unknown>) => unknown>(
      func: T,
    ) => func;
    const originalModule = await importOriginal<typeof import("react")>();
    return {
      ...originalModule,
      cache: testCache,
    };
  });

[ksdaylight]

Love you all!

[shubhamranjan312]

TypeError: _react.default.useRef.mockReturnValue is not a function

[shubhamranjan312]

pls help me

[discoverlance-com]

I am experiencing this error even though I am not using tests with jest or anything like that. I am not in a testing context by the way as this issue describes but I am in a normal application context on a page that imports a function that uses the cache function from react

[flygare]

Make sure your middleware is not accidentally importing a file which is importing the react cache, that was the issue for me per this issue. Needed to break out the function middleware is using to a file not importing the react cache

[usamaadev]

Absolutely Right, In my case I was importing a server action from 'actions.ts' file. while the imported action was not using cache but there were other server actions using cache. So it was throwing the same error.

[mgsgde]

I decided not to mock but to use React Cache only in a Next.js environment by checking NEXT_RUNTIME:

const isNextRuntimeEnv = Boolean(process.env.NEXT_RUNTIME);

export const fetchData = isNextRuntimeEnv ? cache(fetchDataFunction) : fetchDataFunction;

[lirbank]

I think you can just force upgrade React to v19 RC and it will solve this. Next.js 14 is bundled with React 19 but they install React 18 as the dependency. So when you run tests it will use React 18, which does not have the cache fn for example, it won't work.

Weird it is, but instead of messing with mocks etc, just upgrade to React 19 and you should be golden.