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/
+ )
+ })
+})