test(e2e): add HMR reconnect test case (#6045)

Author: chenjiahan

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

@@ -0,0 +1,50 @@
+import fs from 'node:fs';
+import { join } from 'node:path';
+import { dev, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+const cwd = __dirname;
+
+rspackOnlyTest(
+  'should reconnect Web Socket server as expected',
+  async ({ page }) => {
+    await fs.promises.cp(join(cwd, 'src'), join(cwd, 'test-temp-src'), {
+      recursive: true,
+    });
+
+    const entry = {
+      index: join(cwd, 'test-temp-src/index.ts'),
+    };
+
+    const rsbuild = await dev({
+      cwd,
+      page,
+      rsbuildConfig: {
+        source: { entry },
+      },
+    });
+
+    const locator = page.locator('#test');
+    await expect(locator).toHaveText('Hello Rsbuild!');
+
+    const { port } = rsbuild;
+    await rsbuild.close();
+
+    const rsbuild2 = await dev({
+      cwd,
+      rsbuildConfig: {
+        server: { port },
+        source: { entry },
+      },
+    });
+
+    const appPath = join(cwd, 'test-temp-src/App.tsx');
+    await fs.promises.writeFile(
+      appPath,
+      fs.readFileSync(appPath, 'utf-8').replace('Hello Rsbuild', 'Hello Test'),
+    );
+    await expect(locator).toHaveText('Hello Test!');
+
+    await rsbuild2.close();
+  },
+);

e2e/cases/hmr/reconnect/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/hmr/reconnect/src/App.tsx

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

e2e/cases/hmr/reconnect/src/index.ts

@@ -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));
+}