test: rewrite to e2e

.github/workflows/nodejs.yml

@@ -56,19 +56,20 @@ jobs:
         run: if [ -n "$(git status types --porcelain)" ]; then echo "Missing types. Update types by running 'npm run build:types'"; exit 1; else echo "All types are valid"; fi
 
   test:
-    name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }}
+    name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }} (${{ matrix.shard }})
 
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [20.x, 22.x, 24.x, 25.x]
         webpack-version: [latest]
+        shard: ["1/4", "2/4", "3/4", "4/4"]
 
     runs-on: ${{ matrix.os }}
 
     concurrency:
-      group: test-${{ matrix.os }}-v${{ matrix.node-version }}-${{ matrix.webpack-version }}-${{ github.ref }}
+      group: test-${{ matrix.os }}-v${{ matrix.node-version }}-${{ matrix.webpack-version }}-${{ matrix.shard }}-${{ github.ref }}
       cancel-in-progress: true
 
     steps:
@@ -84,9 +85,35 @@ jobs:
         run: npm ci
 
       - name: Run tests for webpack version ${{ matrix.webpack-version }}
-        run: npm run test:coverage -- --ci
+        run: npm run test:coverage -- --ci --shard=${{ matrix.shard }}
+
+      - name: Run browser e2e tests
+        run: npm run test:e2e -- --ci --shard=${{ matrix.shard }} --collectCoverageFrom="src/**/*.js" --coverage --coverageDirectory=coverage-e2e
+
+      - name: Upload coverage artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: coverage-${{ matrix.os }}-${{ matrix.node-version }}-${{ strategy.job-index }}
+          path: |
+            coverage/lcov.info
+            coverage-e2e/lcov.info
+
+  upload-coverage:
+    name: Upload coverage to codecov
+    needs: test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Download coverage artifacts
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          pattern: coverage-*
+          path: coverage
 
       - name: Submit coverage data to codecov
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+          directory: coverage

.gitignore

@@ -19,3 +19,5 @@ Thumbs.db
 *.sublime-project
 *.sublime-workspace
 yarn.lock
+/test/fixtures/js3
+/coverage-e2e

client-src/index.js

@@ -145,6 +145,7 @@ function createEventSourceWrapper() {
   let timer;
   /** @type {ReturnType<typeof setTimeout>} */
   let reconnectTimer;
+  let closed = false;
 
   const handleOnline = () => {
     log.info("connected");
@@ -162,18 +163,30 @@ function createEventSourceWrapper() {
   };
 
   /**
-   * Close the connection and stop the activity timer without scheduling a
-   * reconnection. A reconnection that is already pending is cancelled too, so
-   * closing during the reconnect window really is final.
+   * Tear the current connection down without deciding whether it is final.
    */
-  const close = () => {
+  const stop = () => {
     clearInterval(timer);
     clearTimeout(reconnectTimer);
     source.close();
   };
 
+  /**
+   * Close for good: no reconnection is scheduled, a pending one is cancelled,
+   * and error events already queued behind the close (the EventSource fires
+   * one when its connection dies) can no longer resurrect the wrapper.
+   */
+  const close = () => {
+    closed = true;
+    stop();
+  };
+
   const handleDisconnect = () => {
-    close();
+    if (closed) {
+      return;
+    }
+
+    stop();
     reconnectTimer = setTimeout(init, /** @type {number} */ (options.timeout));
   };
 

client-src/process-update.js

@@ -122,8 +122,9 @@ export default function applyUpdate(hash, options, name) {
    * @param {(string | number)[] | null | undefined} renewedModules ids of modules that were successfully renewed
    */
   function logUpdates(updatedModules, renewedModules) {
+    const renewedIds = new Set(renewedModules || []);
     const unacceptedModules = updatedModules.filter(
-      (moduleId) => !renewedModules || !renewedModules.includes(moduleId),
+      (moduleId) => !renewedIds.has(moduleId),
     );
 
     if (unacceptedModules.length > 0) {

client-src/utils/log.js

@@ -15,4 +15,32 @@ export function setLogLevel(level) {
 
 setLogLevel(DEFAULT_LEVEL);
 
-export const log = logger.getLogger(LOGGER_NAME);
+const rawLog = logger.getLogger(LOGGER_NAME);
+
+/**
+ * Guard a logger method: under a `require-trusted-types-for 'script'`
+ * Content Security Policy, tapable (bundled through webpack's logging
+ * runtime) cannot compile its hooks — `new Function` throws an EvalError on
+ * the first log call. Swallowing it keeps HMR fully functional with logging
+ * off instead of breaking whatever listener happened to log.
+ * @param {string} method logger method name
+ * @returns {(...args: unknown[]) => void} guarded method
+ */
+function guarded(method) {
+  return (...args) => {
+    try {
+      rawLog[method](...args);
+    } catch {
+      // Logging is unavailable (e.g. Trusted Types enforcement).
+    }
+  };
+}
+
+export const log = {
+  error: guarded("error"),
+  warn: guarded("warn"),
+  info: guarded("info"),
+  log: guarded("log"),
+  groupCollapsed: guarded("groupCollapsed"),
+  groupEnd: guarded("groupEnd"),
+};

jest.config.js

@@ -1,9 +1,16 @@
+// The browser e2e suites run serially through `npm run test:e2e` — excluded
+// here so the regular run stays parallel. The ignore lifts itself when a
+// test/e2e path is requested explicitly (a CLI flag would swallow positional
+// file arguments, --testPathIgnorePatterns being variadic).
+const runningE2E = process.argv.some((arg) => arg.includes("test/e2e"));
+
 module.exports = {
   testEnvironment: "node",
   collectCoverage: false,
   coveragePathIgnorePatterns: ["test", "<rootDir>/node_modules"],
   moduleFileExtensions: ["js", "json"],
   testMatch: ["**/test/**/*.test.js"],
+  testPathIgnorePatterns: runningE2E ? [] : ["/node_modules/", "/test/e2e/"],
   setupFilesAfterEnv: ["<rootDir>/setupTest.js"],
   globalSetup: "./test/helpers/globalSetup.js",
   snapshotResolver: "./test/helpers/snapshotResolver.js",