diff --git a/test/e2e/react-compiler/.babelrc b/test/e2e/react-compiler/.babelrc new file mode 100644 index 0000000000000..1ff94f7ed28e1 --- /dev/null +++ b/test/e2e/react-compiler/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel"] +} diff --git a/test/e2e/react-compiler/app/layout.tsx b/test/e2e/react-compiler/app/layout.tsx new file mode 100644 index 0000000000000..af824ab0611d1 --- /dev/null +++ b/test/e2e/react-compiler/app/layout.tsx @@ -0,0 +1,13 @@ +'use client' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/test/e2e/react-compiler/app/page.tsx b/test/e2e/react-compiler/app/page.tsx new file mode 100644 index 0000000000000..e5c502bd1ae80 --- /dev/null +++ b/test/e2e/react-compiler/app/page.tsx @@ -0,0 +1,25 @@ +'use client' + +export default function Page() { + let heading: any = null + // eslint-disable-next-line no-eval + const $_ = eval('$') + if (Array.isArray($_)) { + // console.log("useMemoCache", $_); + heading = ( +

+ {/* @ts-ignore */} + React compiler is enabled with {$_.length} memo slots +

+ ) + } + + return ( + <> +
+ {heading} +

hello world

+
+ + ) +} diff --git a/test/e2e/react-compiler/next.config.js b/test/e2e/react-compiler/next.config.js new file mode 100644 index 0000000000000..84329106a1785 --- /dev/null +++ b/test/e2e/react-compiler/next.config.js @@ -0,0 +1,12 @@ +/** + * @type {import('next').NextConfig} + */ +const nextConfig = { + experimental: { + // Forces nextjs to use experimental react which has the useMemoCache hook. + ppr: true, + reactCompiler: true, + }, +} + +module.exports = nextConfig diff --git a/test/e2e/react-compiler/react-compiler.test.ts b/test/e2e/react-compiler/react-compiler.test.ts new file mode 100644 index 0000000000000..bc03fa4eaf915 --- /dev/null +++ b/test/e2e/react-compiler/react-compiler.test.ts @@ -0,0 +1,27 @@ +import { nextTestSetup, FileRef } from 'e2e-utils' +import { join } from 'path' + +describe.each( + ['default', process.env.TURBOPACK ? undefined : 'babelrc'].filter(Boolean) +)('react-compiler %s', (variant) => { + const { next } = nextTestSetup({ + files: + variant === 'babelrc' + ? __dirname + : { + app: new FileRef(join(__dirname, 'app')), + 'next.config.js': new FileRef(join(__dirname, 'next.config.js')), + }, + + dependencies: { + 'babel-plugin-react-compiler': '0.0.0-experimental-4690415-20240515', + }, + }) + + it('should render', async () => { + const $ = await next.render$('/') + expect($('h1').text()).toMatch( + /React compiler is enabled with .+ memo slots/ + ) + }) +})