test: use Webpack 5 as default target (#440)

.circleci/config.yml

@@ -5,7 +5,7 @@ anchors:
     - '10.24'
     - '12.22'
     - '14.17'
-    - '16.2'
+    - '16.4'
   - &webpack-version-enum
     - '4'
     - '5'

jest.config.js

@@ -6,6 +6,5 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest-test-setup.js'],
   testEnvironment: '<rootDir>/jest-environment.js',
   testMatch: ['<rootDir>/**/*.test.js'],
-  testRunner: 'jest-circus/runner',
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };

package.json

@@ -40,7 +40,7 @@
     "pretest": "yarn link && yarn link \"@pmmmwh/react-refresh-webpack-plugin\"",
     "posttest": "yarn unlink \"@pmmmwh/react-refresh-webpack-plugin\"",
     "test": "node scripts/test.js",
-    "test:webpack-5": "WEBPACK_VERSION=5 yarn test",
+    "test:webpack-4": "cross-env WEBPACK_VERSION=4 yarn test",
     "lint": "eslint --report-unused-disable-directives --ext .js .",
     "lint:fix": "yarn lint --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
@@ -66,11 +66,12 @@
     "@types/jest": "^26.0.23",
     "@types/json-schema": "^7.0.6",
     "@types/module-alias": "^2.0.0",
-    "@types/node": "^15.0.3",
+    "@types/node": "^16.0.0",
     "@types/puppeteer": "^5.4.0",
-    "@types/webpack": "^4.41.28",
+    "@types/webpack": "^5.28.0",
     "babel-jest": "^27.0.5",
     "babel-loader": "^8.1.0",
+    "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
     "del-cli": "^3.0.1",
     "eslint": "^7.26.0",
@@ -90,22 +91,22 @@
     "puppeteer": "^9.1.1",
     "react-refresh": "^0.10.0",
     "sourcemap-validator": "^2.1.0",
-    "type-fest": "^1.1.3",
-    "typescript": "4.3.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-cli.latest": "npm:webpack-cli@4.x",
-    "webpack-dev-server": "^3.11.0",
+    "type-fest": "^1.2.1",
+    "typescript": "4.3.5",
+    "webpack": "^5.42.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-cli.legacy": "npm:webpack-cli@3.x",
+    "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-plugin-serve": "^1.0.1",
-    "webpack.latest": "npm:webpack@5.x",
+    "webpack-plugin-serve": "^1.4.1",
+    "webpack.legacy": "npm:webpack@4.x",
     "yn": "^4.0.0"
   },
   "peerDependencies": {
     "@types/webpack": "4.x || 5.x",
     "react-refresh": "^0.10.0",
     "sockjs-client": "^1.4.0",
-    "type-fest": "^1.0.2",
+    "type-fest": "1.x",
     "webpack": ">=4.43.0 <6.0.0",
     "webpack-dev-server": "3.x || >=4.0.0-beta.0",
     "webpack-hot-middleware": "2.x",
@@ -132,7 +133,7 @@
     }
   },
   "resolutions": {
-    "type-fest": "^1.2.0"
+    "type-fest": "^1.2.1"
   },
   "engines": {
     "node": ">= 10.13"

scripts/test.js

@@ -30,14 +30,9 @@ if (yn(process.env.DEBUG)) {
   argv.push('--verbose');
 }
 
-if (parseInt(process.env.WEBPACK_VERSION || 4, 10) === 5) {
+if (parseInt(process.env.WEBPACK_VERSION || 5, 10) === 4) {
   // Apply Webpack npm aliases in Jest's module system
-  argv.push(
-    `--moduleNameMapper="${JSON.stringify({
-      '^webpack($|/.*)': 'webpack.latest$1',
-      '^webpack-cli($|/.*)': 'webpack-cli.latest$1',
-    })}"`
-  );
+  argv.push(`--moduleNameMapper="${JSON.stringify({ '^webpack($|/.*)': 'webpack.legacy$1' })}"`);
 }
 
 void jest.run(argv);

test/helpers/sandbox/aliasLegacyWebpack.js

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

test/helpers/sandbox/configs.js

@@ -74,6 +74,9 @@ module.exports = {
     new ReactRefreshPlugin(),
   ],
   resolve: {
+    alias: {
+      webpack: '${WEBPACK_VERSION === 4 ? 'webpack.legacy' : 'webpack'}'
+    },
     extensions: ['.js', '.jsx'],
   },
 };

test/helpers/sandbox/index.js

@@ -3,7 +3,7 @@ const fse = require('fs-extra');
 const getPort = require('get-port');
 const { nanoid } = require('nanoid');
 const { getIndexHTML, getPackageJson, getWDSConfig } = require('./configs');
-const { killTestProcess, spawnWDS, spawnWebpackServe } = require('./spawn');
+const { killTestProcess, spawnWebpackServe } = require('./spawn');
 
 // Extends the timeout for tests using the sandbox
 jest.setTimeout(1000 * 60 * 5);
@@ -54,7 +54,6 @@ const sleep = (ms) => {
  */
 
 const rootSandboxDir = path.join(__dirname, '../..', '__tmp__');
-const spawnFn = WEBPACK_VERSION === 5 ? spawnWebpackServe : spawnWDS;
 
 /**
  * Creates a Webpack and Puppeteer backed sandbox to execute HMR operations on.
@@ -92,7 +91,7 @@ async function getSandbox({ esModule = false, id = nanoid(), initialFiles = new
   }
 
   // TODO: Add handling for webpack-hot-middleware and webpack-plugin-serve
-  const app = await spawnFn(port, sandboxDir);
+  const app = await spawnWebpackServe(port, sandboxDir);
   /** @type {import('puppeteer').Page} */
   const page = await browser.newPage();
 

test/helpers/sandbox/spawn.js

@@ -45,13 +45,17 @@ function killTestProcess(instance) {
   }
 }
 
+/**
+ * @typedef {Object} SpawnOptions
+ * @property {string} [cwd]
+ * @property {*} [env]
+ * @property {string | RegExp} [successMessage]
+ */
+
 /**
  * @param {string} processPath
  * @param {*[]} argv
- * @param {Object} [options]
- * @param {string} [options.cwd]
- * @param {*} [options.env]
- * @param {string | RegExp} [options.successMessage]
+ * @param {SpawnOptions} [options]
  * @returns {Promise<import('child_process').ChildProcess | void>}
  */
 function spawnTestProcess(processPath, argv, options = {}) {
@@ -116,30 +120,7 @@ function spawnTestProcess(processPath, argv, options = {}) {
 /**
  * @param {number} port
  * @param {string} directory
- * @param {*} [options]
- * @returns {Promise<import('child_process').ChildProcess | void>}
- */
-function spawnWDS(port, directory, options = {}) {
-  const wdsBin = getPackageExecutable('webpack-dev-server');
-  return spawnTestProcess(
-    wdsBin,
-    [
-      '--config',
-      path.resolve(directory, 'webpack.config.js'),
-      '--content-base',
-      directory,
-      '--hot',
-      '--port',
-      port,
-    ],
-    options
-  );
-}
-
-/**
- * @param {number} port
- * @param {string} directory
- * @param {*} [options]
+ * @param {SpawnOptions} [options]
  * @returns {Promise<import('child_process').ChildProcess | void>}
  */
 function spawnWebpackServe(port, directory, options = {}) {
@@ -155,30 +136,23 @@ function spawnWebpackServe(port, directory, options = {}) {
       '--hot',
       '--port',
       port,
-      '--resolve-alias-name',
-      'webpack',
-      '--resolve-alias-alias',
-      'webpack.latest',
-      '--resolve-alias-name',
-      'webpack-cli',
-      '--resolve-alias-alias',
-      'webpack-cli.latest',
     ],
     {
       ...options,
       env: {
         ...options.env,
-        // 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 `latest` variant.
-        NODE_OPTIONS: `--require "${require.resolve('./aliasLatestWebpack')}"`,
+        ...(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')}"`,
+        }),
       },
     }
   );
 }
 
 module.exports = {
   killTestProcess,
-  spawnWDS,
   spawnWebpackServe,
 };

test/jest-environment.js

@@ -7,7 +7,7 @@ class SandboxEnvironment extends NodeEnvironment {
     await super.setup();
 
     this.global.__DEBUG__ = yn(process.env.DEBUG);
-    this.global.WEBPACK_VERSION = parseInt(process.env.WEBPACK_VERSION || '4', 10);
+    this.global.WEBPACK_VERSION = parseInt(process.env.WEBPACK_VERSION || '5', 10);
 
     const wsEndpoint = process.env.PUPPETEER_WS_ENDPOINT;
     if (!wsEndpoint) {