test(e2e): add case for React compiler (#2487)

e2e/cases/react/react-compiler-babel/index.test.ts

@@ -0,0 +1,42 @@
+import { build, dev, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should render basic React component in development correctly',
+  async ({ page }) => {
+    const rsbuild = await dev({
+      cwd: __dirname,
+    });
+
+    await gotoPage(page, rsbuild);
+
+    const button = page.locator('#button');
+    await expect(button).toHaveText('count: 0');
+    button.click();
+    await expect(button).toHaveText('count: 1');
+
+    rsbuild.close();
+  },
+);
+
+rspackOnlyTest(
+  'should render basic React component in production correctly',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      runServer: true,
+    });
+
+    await gotoPage(page, rsbuild);
+
+    const button = page.locator('#button');
+    await expect(button).toHaveText('count: 0');
+    button.click();
+    await expect(button).toHaveText('count: 1');
+
+    const index = await rsbuild.getIndexFile();
+    expect(index.content).toContain('memo_cache_sentinel');
+
+    rsbuild.close();
+  },
+);

e2e/cases/react/react-compiler-babel/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@e2e/react-compiler-babel",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "19.0.0-rc-6d3110b4d9-20240531",
+    "react-dom": "19.0.0-rc-6d3110b4d9-20240531"
+  },
+  "devDependencies": {
+    "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601"
+  }
+}

e2e/cases/react/react-compiler-babel/rsbuild.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+      babelLoaderOptions(opts) {
+        opts.plugins?.unshift(require.resolve('babel-plugin-react-compiler'));
+      },
+    }),
+  ],
+});

e2e/cases/react/react-compiler-babel/src/App.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <button id="button" type="button" onClick={() => setCount(count + 1)}>
+        count: {count}
+      </button>
+      <div className="content">
+        <h1>Rsbuild with React</h1>
+        <p>Start building amazing things with Rsbuild.</p>
+      </div>
+    </>
+  );
+};
+
+export default App;

e2e/cases/react/react-compiler-babel/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(React.createElement(App));
+}