test: overhaul of testing infra and add more tests

.eslintrc.json

@@ -26,7 +26,11 @@
       }
     },
     {
-      "files": ["test/sandbox/*.js", "test/**/*.test.js"],
+      "files": [
+        "test/jest-test-setup.js",
+        "test/helpers/{,!(fixtures)*/}*.js",
+        "test/**/*.test.js"
+      ],
       "env": {
         "jest": true
       },
@@ -37,10 +41,21 @@
       }
     },
     {
-      "files": ["test/sandbox/runtime/*.js", "test/conformance/**/*.test.js"],
+      "files": ["test/helpers/**/fixtures/*.js", "test/conformance/**/*.test.js"],
       "env": {
         "browser": true
       }
+    },
+    {
+      "files": ["test/**/fixtures/*.esm.js"],
+      "parserOptions": {
+        "ecmaVersion": 2015,
+        "sourceType": "module"
+      },
+      "env": {
+        "commonjs": false,
+        "es6": true
+      }
     }
   ]
 }

client/LegacyWDSSocketEntry.js

@@ -20,7 +20,7 @@ SockJSClient.prototype.onClose = function onClose(fn) {
 
 /**
  * Creates a handler to handle socket message events.
- * @param {function(data: *): void} fn
+ * @param {function(*): void} fn
  */
 SockJSClient.prototype.onMessage = function onMessage(fn) {
   this.socket.onmessage = function onMessageHandler(event) {

client/errorEventHandlers.js

@@ -51,7 +51,7 @@ function createRejectionHandler(callback) {
  * Creates a handler that registers an EventListener on window for a valid type
  * and calls a callback when the event fires.
  * @param {string} eventType A valid DOM event type.
- * @param {function(callback: EventCallback): EventHandler} createHandler A function that creates an event handler.
+ * @param {function(EventCallback): EventHandler} createHandler A function that creates an event handler.
  * @returns {register} A function that registers the EventListener given a callback.
  */
 function createWindowEventHandler(eventType, createHandler) {

jest.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   globalSetup: '<rootDir>/jest-global-setup.js',
   globalTeardown: '<rootDir>/jest-global-teardown.js',
-  modulePaths: [],
   rootDir: 'test',
+  setupFilesAfterEnv: ['<rootDir>/jest-test-setup.js'],
   testEnvironment: '<rootDir>/jest-environment.js',
   testMatch: ['<rootDir>/**/*.test.js'],
   testRunner: 'jest-circus/runner',

lib/index.js

@@ -87,6 +87,7 @@ class ReactRefreshPlugin {
     compiler.options.entry = injectRefreshEntry(compiler.options.entry, this.options);
 
     // Inject necessary modules to bundle's global scope
+    /** @type {Record<string, string>} */
     let providedModules = {
       __react_refresh_utils__: require.resolve('./runtime/RefreshUtils'),
     };
@@ -248,7 +249,11 @@ class ReactRefreshPlugin {
           }
         }
 
-        // Transform global calls into Webpack runtime calls
+        /**
+         * Transform global calls into Webpack runtime calls.
+         * @param {*} parser
+         * @returns {void}
+         */
         const parserHandler = (parser) => {
           Object.entries(REPLACEMENTS).forEach(([key, info]) => {
             parser.hooks.expression

lib/runtime/RefreshUtils.js

@@ -48,15 +48,15 @@ function createDebounceUpdate() {
    * A cached setTimeout handler.
    * @type {number | void}
    */
-  let refreshTimeout = undefined;
+  let refreshTimeout;
 
   /**
    * Performs react refresh on a delay and clears the error overlay.
    * @param {function(): void} callback
    * @returns {void}
    */
   function enqueueUpdate(callback) {
-    if (refreshTimeout === undefined) {
+    if (typeof refreshTimeout === 'undefined') {
       refreshTimeout = setTimeout(function () {
         refreshTimeout = undefined;
         Refresh.performReactRefresh();

lib/utils/getParserHelpers.js

@@ -3,15 +3,15 @@ const { webpackVersion } = require('../globals');
 /**
  * @callback EvaluateToString
  * @param {string} value
- * @returns {function(expr: *): *}
+ * @returns {function(*): *}
  */
 
 /**
  * @callback ToConstantDependency
  * @param {*} parser
  * @param {string} value
  * @param {string[]} [runtimeRequirements]
- * @returns {function(expr: *): boolean}
+ * @returns {function(*): boolean}
  */
 
 /**

lib/utils/getRefreshGlobal.js

@@ -3,9 +3,9 @@ const { refreshGlobal } = require('../globals');
 
 /**
  * @typedef {Object} RuntimeTemplate
- * @property {function(args: string, body: string[]): string} basicFunction
+ * @property {function(string, string[]): string} basicFunction
  * @property {function(): boolean} supportsConst
- * @property {function(returnValue: string, args: string): string} returningFunction
+ * @property {function(string, string=): string} returningFunction
  */
 
 /** @type {RuntimeTemplate} */

lib/utils/normalizeOptions.js

@@ -5,22 +5,28 @@
  * @param {T} object An object.
  * @param {Property} property A property of the provided object.
  * @param {T[Property]} defaultValue The default value to set for the property.
- * @returns {T[Property]}
+ * @returns {T[Property]} The defaulted property value.
  */
 const d = (object, property, defaultValue) => {
-  return object[property] === undefined ? defaultValue : object[property];
+  if (typeof object[property] === 'undefined' && typeof defaultValue !== 'undefined') {
+    object[property] = defaultValue;
+  }
+  return object[property];
 };
 
 /**
  * Resolves the value for a nested object option.
  * @template T
+ * @template {keyof T} Property
  * @template Result
- * @param {T | undefined} value The option value.
- * @param {function(value: T | undefined): Result} fn The handler to resolve the option's value.
+ * @param {T} object An object.
+ * @param {Property} property A property of the provided object.
+ * @param {function(T | undefined): Result} fn The handler to resolve the property's value.
  * @returns {Result} The resolved option value.
  */
-const nestedOption = (value, fn) => {
-  return fn(value === undefined ? {} : value);
+const nestedOption = (object, property, fn) => {
+  object[property] = fn(object[property]);
+  return object[property];
 };
 
 /**
@@ -29,8 +35,9 @@ const nestedOption = (value, fn) => {
  * @returns {import('../types').NormalizedPluginOptions} Normalized plugin options.
  */
 const normalizeOptions = (options) => {
-  // Show deprecation notice and remove the option before any processing
+  // Show deprecation notice for the `disableRefreshCheck` option and remove it
   if (typeof options.disableRefreshCheck !== 'undefined') {
+    delete options.disableRefreshCheck;
     console.warn(
       [
         'The "disableRefreshCheck" option has been deprecated and will not have any effect on how the plugin parses files.',
@@ -39,36 +46,37 @@ const normalizeOptions = (options) => {
     );
   }
 
-  return {
-    exclude: d(options, 'exclude', /node_modules/),
-    forceEnable: options.forceEnable,
-    include: d(options, 'include', /\.([jt]sx?|flow)$/),
-    overlay: nestedOption(options.overlay, (overlay) => {
-      /** @type {import('../types').NormalizedErrorOverlayOptions} */
-      const defaults = {
-        entry: require.resolve('../../client/ErrorOverlayEntry'),
-        module: require.resolve('../../overlay'),
-        sockIntegration: 'wds',
-      };
+  d(options, 'exclude', /node_modules/);
+  d(options, 'include', /\.([jt]sx?|flow)$/);
+  d(options, 'forceEnable');
+  d(options, 'useLegacyWDSSockets');
+
+  nestedOption(options, 'overlay', (overlay) => {
+    /** @type {import('../types').NormalizedErrorOverlayOptions} */
+    const defaults = {
+      entry: require.resolve('../../client/ErrorOverlayEntry'),
+      module: require.resolve('../../overlay'),
+      sockIntegration: 'wds',
+    };
+
+    if (overlay === false) {
+      return false;
+    }
+    if (typeof overlay === 'undefined' || overlay === true) {
+      return defaults;
+    }
+
+    d(overlay, 'entry', defaults.entry);
+    d(overlay, 'module', defaults.module);
+    d(overlay, 'sockIntegration', defaults.sockIntegration);
+    d(overlay, 'sockHost');
+    d(overlay, 'sockPath');
+    d(overlay, 'sockPort');
 
-      if (overlay === false) {
-        return false;
-      }
-      if (overlay === true) {
-        return defaults;
-      }
+    return overlay;
+  });
 
-      return {
-        entry: d(overlay, 'entry', defaults.entry),
-        module: d(overlay, 'module', defaults.module),
-        sockHost: overlay.sockHost,
-        sockIntegration: d(overlay, 'sockIntegration', defaults.sockIntegration),
-        sockPath: overlay.sockPath,
-        sockPort: overlay.sockPort,
-      };
-    }),
-    useLegacyWDSSockets: options.useLegacyWDSSockets,
-  };
+  return options;
 };
 
 module.exports = normalizeOptions;

loader/index.js

@@ -53,6 +53,12 @@ const RefreshModuleRuntime = getTemplate(require('./RefreshModule.runtime'));
 function ReactRefreshLoader(source, inputSourceMap, meta) {
   const callback = this.async();
 
+  /**
+   * @this {import('webpack').loader.LoaderContext}
+   * @param {string} source
+   * @param {import('source-map').RawSourceMap} [inputSourceMap]
+   * @returns {Promise<[string, import('source-map').RawSourceMap]>}
+   */
   async function _loader(source, inputSourceMap) {
     if (this.sourceMap) {
       let originalSourceMap = inputSourceMap;

overlay/components/RuntimeErrorFooter.js

@@ -5,9 +5,9 @@ const Spacer = require('./Spacer');
  * @typedef {Object} RuntimeErrorFooterProps
  * @property {string} [initialFocus]
  * @property {boolean} multiple
- * @property {function(event: MouseEvent): void} onClickCloseButton
- * @property {function(event: MouseEvent): void} onClickNextButton
- * @property {function(event: MouseEvent): void} onClickPrevButton
+ * @property {function(MouseEvent): void} onClickCloseButton
+ * @property {function(MouseEvent): void} onClickNextButton
+ * @property {function(MouseEvent): void} onClickPrevButton
  */
 
 /**

package.json

@@ -36,7 +36,7 @@
     "types"
   ],
   "scripts": {
-    "pretest": "yarn link && yarn link \"@pmmmwh/react-refresh-webpack-plugin\"",
+    "pretest": "patch-package && yarn link && yarn link \"@pmmmwh/react-refresh-webpack-plugin\"",
     "posttest": "yarn unlink \"@pmmmwh/react-refresh-webpack-plugin\"",
     "test": "node scripts/test.js",
     "lint": "eslint --report-unused-disable-directives --ext .js .",
@@ -74,11 +74,14 @@
     "jest-environment-node": "^26.1.0",
     "jest-junit": "^11.0.1",
     "jest-watch-typeahead": "^0.6.0",
+    "memfs": "^3.2.0",
     "nanoid": "^3.1.10",
+    "patch-package": "^6.2.2",
     "prettier": "^2.0.5",
     "puppeteer": "^3.3.0",
     "react-refresh": "^0.8.3",
     "rimraf": "^3.0.2",
+    "sourcemap-validator": "^2.1.0",
     "type-fest": "^0.15.1",
     "typescript": "^3.9.5",
     "webpack": "^4.43.0",

patches/jest-snapshot+26.1.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/jest-snapshot/build/index.js b/node_modules/jest-snapshot/build/index.js
+index 9094081..db825d4 100644
+--- a/node_modules/jest-snapshot/build/index.js
++++ b/node_modules/jest-snapshot/build/index.js
+@@ -504,7 +504,10 @@ const toThrowErrorMatchingInlineSnapshot = function (
+   return _toThrowErrorMatchingSnapshot(
+     {
+       context: this,
+-      inlineSnapshot,
++      inlineSnapshot:
++        inlineSnapshot !== undefined
++          ? stripAddedIndentation(inlineSnapshot)
++          : undefined,
+       isInline: true,
+       matcherName,
+       received

sockets/WDSSocket.js

@@ -5,7 +5,7 @@ const getResourceQuery = require('./utils/getResourceQuery');
 
 /**
  * Initializes a socket server for HMR for webpack-dev-server.
- * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
  * @returns {void}
  */
 function initWDSSocket(messageHandler) {

sockets/WHMEventSource.js

@@ -7,7 +7,7 @@ const singletonKey = '__webpack_hot_middleware_reporter__';
 
 /**
  * Initializes a socket server for HMR for webpack-hot-middleware.
- * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
  * @returns {void}
  */
 function initWHMEventSource(messageHandler) {

sockets/WPSSocket.js

@@ -2,7 +2,7 @@
 
 /**
  * Initializes a socket server for HMR for webpack-plugin-serve.
- * @param {function(message: *): void} messageHandler A handler to consume Webpack compilation messages.
+ * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
  * @returns {void}
  */
 function initWPSSocket(messageHandler) {