test: run tests on WDS v4 (#513)

Author: pmmmwh

.circleci/config.yml

@@ -5,7 +5,7 @@ anchors:
     - '10.24'
     - '12.22'
     - '14.17'
-    - '16.4'
+    - '16.8'
   - &webpack-version-enum
     - '4'
     - '5'
@@ -32,7 +32,17 @@ commands:
             - node-deps-v1-<< parameters.node-version >>-
       - run:
           name: Install project dependencies
-          command: yarn install --cache-folder ~/.cache/yarn --frozen-lockfile
+          command: |-
+            # Ignore engines mismatch for Node.js v10.x
+            extra_args=""
+            if [[ "<< parameters.node-version >>" == 10* ]]; then
+              extra_args+="--ignore-engines"
+            fi
+
+            yarn install \
+              --cache-folder ~/.cache/yarn \
+              --frozen-lockfile \
+              $extra_args
       - save_cache:
           key: node-deps-v1-<< parameters.node-version >>-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:

.eslintrc.json

@@ -31,6 +31,7 @@
       },
       "globals": {
         "__DEBUG__": true,
+        "WDS_VERSION": true,
         "WEBPACK_VERSION": true,
         "browser": true
       },

package.json

@@ -97,13 +97,15 @@
     "prettier": "^2.3.0",
     "puppeteer": "^9.1.1",
     "react-refresh": "^0.10.0",
+    "semver": "^7.3.5",
     "sourcemap-validator": "^2.1.0",
     "type-fest": "^1.4.0",
     "typescript": "4.4.3",
     "webpack": "^5.42.0",
     "webpack-cli": "^4.7.2",
     "webpack-cli.legacy": "npm:[email protected]",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.2.1",
+    "webpack-dev-server.legacy": "npm:[email protected]",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-plugin-serve": "^1.4.1",
     "webpack.legacy": "npm:[email protected]",

test/helpers/sandbox/aliasLegacyWebpackDevServer.js

@@ -0,0 +1,3 @@
+const moduleAlias = require('module-alias');
+
+moduleAlias.addAliases({ 'webpack-dev-server': 'webpack-dev-server.legacy' });

test/helpers/sandbox/configs.js

@@ -40,7 +40,7 @@ function getPackageJson(esModule = false) {
  */
 function getWDSConfig(srcDir) {
   return `
-const { DefinePlugin } = require('webpack');
+const { DefinePlugin, ProgressPlugin } = require('webpack');
 const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
@@ -72,12 +72,22 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({ __react_refresh_test__: true }),
+    new ProgressPlugin((percentage) => {
+      if (percentage === 1) {
+        console.log("Webpack compilation complete.");
+      }
+    }),
     new ReactRefreshPlugin(),
   ],
   resolve: {
-    alias: {
-      webpack: '${WEBPACK_VERSION === 4 ? 'webpack.legacy' : 'webpack'}'
-    },
+    alias: ${JSON.stringify(
+      {
+        ...(WEBPACK_VERSION === 4 && { webpack: 'webpack.legacy' }),
+        ...(WDS_VERSION === 3 && { 'webpack-dev-server': 'webpack-dev-server.legacy' }),
+      },
+      null,
+      2
+    )},
     extensions: ['.js', '.jsx'],
   },
 };

test/helpers/sandbox/index.js

@@ -6,7 +6,7 @@ const { getIndexHTML, getPackageJson, getWDSConfig } = require('./configs');
 const { killTestProcess, spawnWebpackServe } = require('./spawn');
 
 // Extends the timeout for tests using the sandbox
-jest.setTimeout(1000 * 60 * 5);
+jest.setTimeout(1000 * 60);
 
 // Setup a global "queue" of cleanup handlers to allow auto-teardown of tests,
 // even when they did not run the cleanup function.
@@ -69,15 +69,18 @@ async function getSandbox({ esModule = false, id = nanoid(), initialFiles = new
   // Get sandbox directory paths
   const sandboxDir = path.join(rootSandboxDir, id);
   const srcDir = path.join(sandboxDir, 'src');
+  const publicDir = path.join(sandboxDir, 'public');
   // In case of an ID clash, remove the existing sandbox directory
   await fse.remove(sandboxDir);
   // Create the sandbox source directory
   await fse.mkdirp(srcDir);
+  // Create the sandbox public directory
+  await fse.mkdirp(publicDir);
 
   // Write necessary files to sandbox
-  await fse.writeFile(path.join(srcDir, 'package.json'), getPackageJson(esModule));
   await fse.writeFile(path.join(sandboxDir, 'webpack.config.js'), getWDSConfig(srcDir));
-  await fse.writeFile(path.join(sandboxDir, 'index.html'), getIndexHTML(port));
+  await fse.writeFile(path.join(publicDir, 'index.html'), getIndexHTML(port));
+  await fse.writeFile(path.join(srcDir, 'package.json'), getPackageJson(esModule));
   await fse.writeFile(
     path.join(srcDir, 'index.js'),
     esModule
@@ -91,7 +94,7 @@ async function getSandbox({ esModule = false, id = nanoid(), initialFiles = new
   }
 
   // TODO: Add handling for webpack-hot-middleware and webpack-plugin-serve
-  const app = await spawnWebpackServe(port, sandboxDir);
+  const app = await spawnWebpackServe(port, { public: publicDir, root: sandboxDir, src: srcDir });
   /** @type {import('puppeteer').Page} */
   const page = await browser.newPage();
 

test/helpers/sandbox/spawn.js

@@ -65,7 +65,7 @@ function spawnTestProcess(processPath, argv, options = {}) {
     NODE_ENV: 'development',
     ...options.env,
   };
-  const successRegex = new RegExp(options.successMessage || 'compiled successfully', 'i');
+  const successRegex = new RegExp(options.successMessage || 'webpack compilation complete.', 'i');
 
   return new Promise((resolve, reject) => {
     const instance = spawn(processPath, argv, { cwd, env });
@@ -95,7 +95,10 @@ function spawnTestProcess(processPath, argv, options = {}) {
      */
     function handleStderr(data) {
       const message = data.toString();
-      process.stderr.write(message);
+
+      if (__DEBUG__) {
+        process.stderr.write(message);
+      }
     }
 
     instance.stdout.on('data', handleStdout);
@@ -119,35 +122,45 @@ function spawnTestProcess(processPath, argv, options = {}) {
 
 /**
  * @param {number} port
- * @param {string} directory
+ * @param {Object} dirs
+ * @param {string} dirs.public
+ * @param {string} dirs.root
+ * @param {string} dirs.src
  * @param {SpawnOptions} [options]
  * @returns {Promise<import('child_process').ChildProcess | void>}
  */
-function spawnWebpackServe(port, directory, options = {}) {
+function spawnWebpackServe(port, dirs, options = {}) {
   const webpackBin = getPackageExecutable('webpack-cli');
+
+  const NODE_OPTIONS = [
+    // This requires a script to alias `webpack` and `webpack-cli` -
+    // both v4 and v5 is installed side by side,
+    // so we have to ensure that they resolve to the `legacy` variant.
+    WEBPACK_VERSION === 4 && `--require "${require.resolve('./aliasLegacyWebpack')}"`,
+    // This requires a script to alias `webpack-dev-server` for Node.js v10.x -
+    // both v3 and v4 is installed side by side,
+    // so we have to ensure that it resolves to the `legacy` variant.
+    WDS_VERSION === 3 && `--require "${require.resolve('./aliasLegacyWebpackDevServer')}"`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   return spawnTestProcess(
     webpackBin,
     [
       'serve',
+      '--no-color',
       '--config',
-      path.resolve(directory, 'webpack.config.js'),
-      '--content-base',
-      directory,
+      path.join(dirs.root, 'webpack.config.js'),
+      WDS_VERSION === 3 ? '--content-base' : '--static-directory',
+      dirs.public,
       '--hot',
       '--port',
       port,
     ],
     {
       ...options,
-      env: {
-        ...options.env,
-        ...(WEBPACK_VERSION === 4 && {
-          // This requires a script to alias `webpack` and `webpack-cli` -
-          // both v4 and v5 is installed side by side,
-          // so we have to ensure that they resolve to the `legacy` variant.
-          NODE_OPTIONS: `--require "${require.resolve('./aliasLegacyWebpack')}"`,
-        }),
-      },
+      env: { ...options.env, ...(NODE_OPTIONS && { NODE_OPTIONS }) },
     }
   );
 }

test/jest-environment.js

@@ -1,5 +1,6 @@
 const NodeEnvironment = require('jest-environment-node');
 const puppeteer = require('puppeteer');
+const semver = require('semver');
 const yn = require('yn');
 
 class SandboxEnvironment extends NodeEnvironment {
@@ -8,6 +9,7 @@ class SandboxEnvironment extends NodeEnvironment {
 
     this.global.__DEBUG__ = yn(process.env.DEBUG);
     this.global.WEBPACK_VERSION = parseInt(process.env.WEBPACK_VERSION || '5', 10);
+    this.global.WDS_VERSION = semver.major(process.version) < 12 ? 3 : 4;
 
     const wsEndpoint = process.env.PUPPETEER_WS_ENDPOINT;
     if (!wsEndpoint) {