Description

Currently when using Next 14, it can support features like React.cache.

For example, if my test is

// cache/index.ts
import * as React from 'react'
import { fetch } from '@/api/fetch'

export const fetcher = React.cache(
  (name: string) => {
    return fetch(name)
  },
)

// cache/index.test.tsx
import { HttpResponse } from 'msw'
import { test } from 'vitest'

import { server } from '../mocks/server'
import { fetcher } from '.'

test('cache', async () => {
  server.use(
    http.post(() => {
      return HttpResponse.json({ data: { fetcher: { items: [] } } })
    }),
  )

  const name = "hello world"

  const data1 = await fetcher(name)
  const data2 = await fetcher(name)
  const data3 = await fetcher(name)

  expect(data1).toBe(data2)
  expect(data2).toBe(data3)
})

You'll get hit with

FAIL cache/index.test.ts [ cache/index.test.ts ]
TypeError: cache is not a function
❯ cache/index.ts:9:50

and console.log(React.cache) gives you undefined.

Next.JS

nextjs actually loads react from node_modules/next/dist/compliled/next-server, for example in prod it's node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js.

Is there a way to let vitest load in this react version during the tests? Then can we not support next.js from that?

Suggested solution

I don't know. Somehow alias react to node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.