test(e2e): add HMR error handling test case (#4685)

Author: chenjiahan

e2e/cases/server/hmr-with-error/index.test.ts

@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import { join } from 'node:path';
+import { dev, proxyConsole, rspackOnlyTest, waitFor } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+const cwd = __dirname;
+
+rspackOnlyTest(
+  'HMR should work after fixing compilation error',
+  async ({ page }) => {
+    if (process.platform === 'win32') {
+      test.skip();
+    }
+
+    await fs.promises.cp(join(cwd, 'src'), join(cwd, 'test-temp-src'), {
+      recursive: true,
+    });
+
+    const { logs, restore } = proxyConsole();
+
+    const rsbuild = await dev({
+      cwd,
+      page,
+      rsbuildConfig: {
+        source: {
+          entry: {
+            index: join(cwd, 'test-temp-src/index.ts'),
+          },
+        },
+      },
+    });
+
+    const locator = page.locator('#test');
+    await expect(locator).toHaveText('Hello Rsbuild!');
+
+    const appPath = join(cwd, 'test-temp-src/App.tsx');
+
+    await fs.promises.writeFile(
+      appPath,
+      fs
+        .readFileSync(appPath, 'utf-8')
+        .replace(
+          '<div id="test">Hello Rsbuild!</div>',
+          '<div id="test">Hello Rsbuild!</div',
+        ),
+    );
+
+    expect(
+      await waitFor(() =>
+        logs.some((log) => log.includes('Module build failed')),
+      ),
+    ).toBeTruthy();
+
+    await fs.promises.writeFile(
+      appPath,
+      fs
+        .readFileSync(appPath, 'utf-8')
+        .replace(
+          '<div id="test">Hello Rsbuild!</div',
+          '<div id="test">Hello Rsbuild2!</div>',
+        ),
+    );
+
+    await expect(locator).toHaveText('Hello Rsbuild2!');
+    await rsbuild.close();
+
+    restore();
+  },
+);

e2e/cases/server/hmr-with-error/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+});

e2e/cases/server/hmr-with-error/src/App.css

@@ -0,0 +1,3 @@
+#test {
+  color: rgb(255, 0, 0);
+}

e2e/cases/server/hmr-with-error/src/App.tsx

@@ -0,0 +1,4 @@
+import './App.css';
+
+const App = () => <div id="test">Hello Rsbuild!</div>;
+export default App;

e2e/cases/server/hmr-with-error/src/index.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const num = Math.ceil(Math.random() * 100);
+const testEl = document.createElement('div');
+testEl.id = 'test-keep';
+
+testEl.innerHTML = String(num);
+
+document.body.appendChild(testEl);
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(React.createElement(App));
+}

e2e/cases/server/hmr/index.test.ts

@@ -24,12 +24,6 @@ rspackOnlyTest('HMR should work by default', async ({ page }) => {
           index: join(cwd, 'test-temp-src/index.ts'),
         },
       },
-      dev: {
-        client: {
-          host: '',
-          port: '',
-        },
-      },
     },
   });