test(e2e): move the reconnection tests to the browser and snapshot their console

The inactivity watchdog is now exercised against a genuinely silent SSE
connection (a server heartbeat far beyond the client timeout): the
second connect proves it fires on pure silence and the third that it
re-arms after a reconnect. Manual recovery gets its own test —
disconnect() followed by setOptionsAndConnect() opens a fresh
connection that still delivers updates. Both, plus the server-restart
catch-up test, snapshot their console sequence; browser network-error
noise is filtered out of the snapshots since its volume depends on
reconnect timing.

The fake-timer equivalents in the jsdom suite are removed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: bjohansebas

test/client.test.js

@@ -633,77 +633,6 @@ describe("client", () => {
       require("../client-src");
       expect(EventSourceStub.instances).toHaveLength(1);
     });
-
-    it("closes and re-opens the connection on timeout", () => {
-      // The watchdog interval is created during the client's first load. Fake
-      // timers must be enabled before that load so jest can drive it.
-      jest.useFakeTimers({ doNotFake: ["nextTick"] });
-      // Drop the wrapper opened by the outer beforeEach so we get a fresh
-      // EventSource scheduled under fake timers.
-      delete globalThis.__wdmEventSourceWrapper;
-      EventSourceStub.instances.length = 0;
-      loadClient();
-
-      const [first] = EventSourceStub.instances;
-      expect(first.closed).toBe(false);
-      // The watchdog ticks at `timeout/2` and disconnects when
-      // `Date.now() - lastActivity > timeout`. 30s is enough to cross that
-      // boundary regardless of which tick reports it first.
-      jest.advanceTimersByTime(30 * 1000);
-      expect(first.closed).toBe(true);
-      // Reconnect is scheduled after `options.timeout` (20s).
-      jest.advanceTimersByTime(20 * 1000);
-      expect(EventSourceStub.instances).toHaveLength(2);
-    });
-
-    it("keeps the inactivity watchdog after a reconnect", () => {
-      jest.useFakeTimers({ doNotFake: ["nextTick"] });
-      delete globalThis.__wdmEventSourceWrapper;
-      EventSourceStub.instances.length = 0;
-      loadClient();
-
-      // First silent stall: the watchdog disconnects and a reconnect opens a
-      // second source 20s later.
-      jest.advanceTimersByTime(30 * 1000);
-      jest.advanceTimersByTime(20 * 1000);
-      expect(EventSourceStub.instances).toHaveLength(2);
-
-      // The reconnected source must be watched too: another silent stall has
-      // to close it and schedule a third connection.
-      const second = EventSourceStub.lastInstance();
-      jest.advanceTimersByTime(30 * 1000);
-      expect(second.closed).toBe(true);
-      jest.advanceTimersByTime(20 * 1000);
-      expect(EventSourceStub.instances).toHaveLength(3);
-    });
-
-    it("ignores error events that arrive after disconnect()", () => {
-      jest.useFakeTimers({ doNotFake: ["nextTick"] });
-      delete globalThis.__wdmEventSourceWrapper;
-      EventSourceStub.instances.length = 0;
-      const freshClient = loadClient();
-
-      const [first] = EventSourceStub.instances;
-      freshClient.disconnect();
-
-      // An EventSource fires a queued error when its connection dies — it
-      // must not resurrect the closed wrapper by scheduling a reconnect.
-      first.dispatch("error", {});
-      jest.advanceTimersByTime(60 * 1000);
-
-      expect(EventSourceStub.instances).toHaveLength(1);
-    });
-
-    it("disconnect() drops the cached wrapper so a new connect starts fresh", () => {
-      client.disconnect();
-      expect(
-        globalThis.__wdmEventSourceWrapper["/__webpack_hmr"],
-      ).toBeUndefined();
-
-      client.setOptionsAndConnect({});
-      expect(EventSourceStub.instances).toHaveLength(2);
-      expect(EventSourceStub.lastInstance().closed).toBe(false);
-    });
   });
 
   describe("with no EventSource", () => {

test/e2e/__snapshots__/client.test.js.snap.webpack5

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`hot client (browser) reconnects after a server restart and syncs up on missed builds 1`] = `
+[
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] Checking for updates on the server...",
+  "[webpack-dev-middleware] Hot updated 1 modules.",
+  "[webpack-dev-middleware] App is up to date.",
+]
+`;
+
+exports[`hot client (browser) reconnects manually with setOptionsAndConnect() after disconnect() 1`] = `
+[
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] bundle rebuilding (<fixture>/app.js changed)",
+  "[webpack-dev-middleware] bundle rebuilt in Xms",
+  "[webpack-dev-middleware] Checking for updates on the server...",
+  "[webpack-dev-middleware] Hot updated 1 modules.",
+  "[webpack-dev-middleware] App is up to date.",
+]
+`;
+
+exports[`hot client (browser) watchdog-reconnects a silent connection and stays armed afterwards 1`] = `
+[
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] connected",
+  "[webpack-dev-middleware] connected",
+]
+`;

test/e2e/client.test.js

@@ -1,4 +1,4 @@
-import collectConsole from "../helpers/console-collector";
+import collectConsole, { normalizeConsole } from "../helpers/console-collector";
 import createHotApp from "../helpers/hot-app";
 import runBrowser from "../helpers/run-browser";
 
@@ -165,6 +165,77 @@ describe("hot client (browser)", () => {
 
     await waitForAppText(page, "v2");
     expect(await readReloadMarker(page)).toBe(true);
+
+    // The whole story in one place: connect, silent gap while the server was
+    // down, reconnect, and the catch-up sync applying the missed build.
+    await console_.waitFor("App is up to date");
+    expect(normalizeConsole(console_.messages)).toMatchSnapshot();
+  });
+
+  it("watchdog-reconnects a silent connection and stays armed afterwards", async () => {
+    app = await createHotApp({
+      query: "?timeout=1000",
+      code: acceptedApp("v1"),
+      // A heartbeat far beyond the client timeout leaves the connection open
+      // but silent, so only the inactivity watchdog can trigger reconnects.
+      hot: { heartbeat: 3600000 },
+    });
+    ({ page, browser } = await runBrowser());
+    const console_ = collectConsole(page);
+
+    await page.goto(app.url);
+    await waitForAppText(page, "v1");
+
+    // Three connects = the initial one plus two watchdog cycles: the second
+    // proves the watchdog fires on pure silence (no error event involved),
+    // the third that it re-arms after a reconnect instead of dying with the
+    // first clearInterval.
+    await console_.waitForCount("connected", 3);
+
+    // Nothing but connects: the silent cycles produce no other output. The
+    // snapshot is taken before the edit — the watchdog keeps cycling, so any
+    // later cut would race with the next reconnect.
+    expect(normalizeConsole(console_.messages)).toMatchSnapshot();
+
+    // The reconnected connection still delivers updates.
+    app.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+
+    expect(
+      await page.evaluate(() => document.getElementById("app").textContent),
+    ).toBe("v2");
+  });
+
+  it("reconnects manually with setOptionsAndConnect() after disconnect()", async () => {
+    app = await createHotApp({
+      code: `
+        globalThis.hotClient = require(${JSON.stringify(CLIENT_ENTRY)});
+        document.getElementById("app").textContent = "v1";
+        if (module.hot) {
+          module.hot.accept();
+        }
+      `,
+    });
+    ({ page, browser } = await runBrowser());
+    const console_ = collectConsole(page);
+
+    await page.goto(app.url);
+    await waitForAppText(page, "v1");
+    await console_.waitFor("connected");
+
+    // disconnect() drops the cached wrapper, so a manual connect starts a
+    // fresh connection on the same path.
+    await page.evaluate(() => {
+      globalThis.hotClient.disconnect();
+      globalThis.hotClient.setOptionsAndConnect({});
+    });
+    await console_.waitForCount("connected", 2);
+
+    app.edit(acceptedApp("v2"));
+    await waitForAppText(page, "v2");
+    await console_.waitFor("App is up to date");
+
+    expect(normalizeConsole(console_.messages)).toMatchSnapshot();
   });
 
   it("routes server publish() payloads to subscribe handlers", async () => {

test/helpers/console-collector.js

@@ -45,16 +45,20 @@ function collectConsole(page) {
 
 /**
  * Strip the run-specific parts (timings, temp fixture paths) so browser
- * console output can be snapshotted.
+ * console output can be snapshotted. Network-error noise emitted by the
+ * browser itself ("Failed to load resource: …") is dropped — how many of
+ * those a severed connection produces depends on reconnect timing.
  * @param {string[]} messages raw console messages
  * @returns {string[]} normalized messages
  */
 function normalizeConsole(messages) {
-  return messages.map((text) =>
-    text
-      .replaceAll(/\d+\s?ms/g, "Xms")
-      .replaceAll(/[^\s(]*wdm-e2e-[^/\s]*/g, "<fixture>"),
-  );
+  return messages
+    .filter((text) => !text.startsWith("Failed to load resource"))
+    .map((text) =>
+      text
+        .replaceAll(/\d+\s?ms/g, "Xms")
+        .replaceAll(/[^\s(]*wdm-e2e-[^/\s]*/g, "<fixture>"),
+    );
 }
 
 module.exports = collectConsole;