test(next): react compiler test cases

vercel · May 15, 2024 · 930a8d4 · 930a8d4
1 parent 4338686
commit 930a8d4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 0 deletions.
diff --git a/test/e2e/react-compiler/.babelrc 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
@@ -0,0 +1,13 @@
+'use client'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html>
+ <body>{children}</body>
+ </html>
+ )
+}
diff --git a/test/e2e/react-compiler/app/page.tsx 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 = (
+ <h1 className="text-9xl">
+ {/* @ts-ignore */}
+ React compiler is enabled with <strong>{$_.length}</strong> memo slots
+ </h1>
+ )
+ }
+
+ return (
+ <>
+ <div>
+ {heading}
+ <p>hello world</p>
+ </div>
+ </>
+ )
+}
diff --git a/test/e2e/react-compiler/next.config.js 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
@@ -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/
+ )
+ })
+})