diff --git a/babel.config.js b/babel.config.js
index bcdab71e08..5e587952f9 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -14,6 +14,7 @@ module.exports = (api) => {
         },
       ],
     ],
+    plugins: ['@babel/plugin-transform-object-assign'],
     env: {
       test: {
         plugins: ['@babel/plugin-transform-runtime'],
diff --git a/client-src/clients/SockJSClient.js b/client-src/clients/SockJSClient.js
index 92ab084c86..e7981615b8 100644
--- a/client-src/clients/SockJSClient.js
+++ b/client-src/clients/SockJSClient.js
@@ -8,11 +8,12 @@ module.exports = class SockJSClient extends BaseClient {
   constructor(url) {
     super();
 
-    const sockUrl = url.replace(/^(?:chrome-extension|file)/i, 'http');
-
-    this.sock = new SockJS(sockUrl);
-    this.sock.onerror = (err) => {
-      log.error(err);
+    // SockJS requires `http` and `https` protocols
+    this.sock = new SockJS(
+      url.replace(/^ws:/i, 'http:').replace(/^wss:/i, 'https:')
+    );
+    this.sock.onerror = (error) => {
+      log.error(error);
     };
   }
 
diff --git a/client-src/clients/WebsocketClient.js b/client-src/clients/WebsocketClient.js
index ebcde666f6..f748edea34 100644
--- a/client-src/clients/WebsocketClient.js
+++ b/client-src/clients/WebsocketClient.js
@@ -7,11 +7,9 @@ module.exports = class WebsocketClient extends BaseClient {
   constructor(url) {
     super();
 
-    const wsUrl = url.replace(/^(?:http|chrome-extension|file)/i, 'ws');
-
-    this.client = new WebSocket(wsUrl);
-    this.client.onerror = (err) => {
-      log.error(err);
+    this.client = new WebSocket(url);
+    this.client.onerror = (error) => {
+      log.error(error);
     };
   }
 
diff --git a/client-src/index.js b/client-src/index.js
index ba0e9c3ad3..1ff36f8497 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -2,19 +2,21 @@
 
 /* global __resourceQuery WorkerGlobalScope */
 
+const webpackHotLog = require('webpack/hot/log');
 const stripAnsi = require('./modules/strip-ansi');
+const parseURL = require('./utils/parseURL');
 const socket = require('./socket');
 const overlay = require('./overlay');
 const { log, setLogLevel } = require('./utils/log');
 const sendMessage = require('./utils/sendMessage');
 const reloadApp = require('./utils/reloadApp');
-const createSocketUrl = require('./utils/createSocketUrl');
+const createSocketURL = require('./utils/createSocketURL');
 
 const status = {
   isUnloading: false,
   currentHash: '',
 };
-const options = {
+const defaultOptions = {
   hot: false,
   hotReload: true,
   liveReload: false,
@@ -23,7 +25,40 @@ const options = {
   useErrorOverlay: false,
   useProgress: false,
 };
-const socketUrl = createSocketUrl(__resourceQuery);
+const parsedResourceQuery = parseURL(__resourceQuery);
+const options = defaultOptions;
+
+// Handle Node.js legacy format and `new URL()`
+if (parsedResourceQuery.query) {
+  Object.assign(options, parsedResourceQuery.query);
+} else if (parsedResourceQuery.searchParams) {
+  const paramsToObject = (entries) => {
+    const result = {};
+
+    for (const [key, value] of entries) {
+      result[key] = value;
+    }
+
+    return result;
+  };
+
+  Object.assign(
+    options,
+    paramsToObject(parsedResourceQuery.searchParams.entries())
+  );
+}
+
+const socketURL = createSocketURL(parsedResourceQuery);
+
+function setAllLogLevel(level) {
+  // This is needed because the HMR logger operate separately from dev server logger
+  webpackHotLog.setLogLevel(level);
+  setLogLevel(level);
+}
+
+if (options.logging) {
+  setAllLogLevel(options.logging);
+}
 
 self.addEventListener('beforeunload', () => {
   status.isUnloading = true;
@@ -68,17 +103,7 @@ const onSocketMessage = {
 
     sendMessage('StillOk');
   },
-  logging: function logging(level) {
-    // this is needed because the HMR logger operate separately from
-    // dev server logger
-    const hotCtx = require.context('webpack/hot', false, /^\.\/log$/);
-
-    if (hotCtx.keys().indexOf('./log') !== -1) {
-      hotCtx('./log').setLogLevel(level);
-    }
-
-    setLogLevel(level);
-  },
+  logging: setAllLogLevel,
   overlay(value) {
     if (typeof document !== 'undefined') {
       if (typeof value === 'boolean') {
@@ -172,4 +197,4 @@ const onSocketMessage = {
   },
 };
 
-socket(socketUrl, onSocketMessage);
+socket(socketURL, onSocketMessage);
diff --git a/client-src/utils/createSocketURL.js b/client-src/utils/createSocketURL.js
new file mode 100644
index 0000000000..40e8cc4970
--- /dev/null
+++ b/client-src/utils/createSocketURL.js
@@ -0,0 +1,96 @@
+'use strict';
+
+const url = require('url');
+
+// We handle legacy API that is Node.js specific, and a newer API that implements the same WHATWG URL Standard used by web browsers
+// Please look at https://nodejs.org/api/url.html#url_url_strings_and_url_objects
+function createSocketURL(parsedURL) {
+  let { auth, hostname, protocol, port } = parsedURL;
+
+  const getURLSearchParam = (name) => {
+    if (parsedURL.searchParams) {
+      return parsedURL.searchParams.get(name);
+    }
+
+    return parsedURL.query && parsedURL.query[name];
+  };
+
+  // Node.js module parses it as `::`
+  // `new URL(urlString, [baseURLstring])` parses it as '[::]'
+  const isInAddrAny =
+    hostname === '0.0.0.0' || hostname === '::' || hostname === '[::]';
+
+  // check ipv4 and ipv6 `all hostname`
+  // why do we need this check?
+  // hostname n/a for file protocol (example, when using electron, ionic)
+  // see: https://github.com/webpack/webpack-dev-server/pull/384
+  if (
+    isInAddrAny &&
+    self.location.hostname &&
+    self.location.protocol.indexOf('http') === 0
+  ) {
+    hostname = self.location.hostname;
+  }
+
+  // `hostname` can be empty when the script path is relative. In that case, specifying a protocol would result in an invalid URL.
+  // When https is used in the app, secure websockets are always necessary because the browser doesn't accept non-secure websockets.
+  if (hostname && isInAddrAny && self.location.protocol === 'https:') {
+    protocol = self.location.protocol;
+  }
+
+  const socketURLProtocol = protocol.replace(
+    /^(?:http|.+-extension|file)/i,
+    'ws'
+  );
+
+  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  // Parse authentication credentials in case we need them
+  if (parsedURL.username) {
+    auth = parsedURL.username;
+
+    // Since HTTP basic authentication does not allow empty username,
+    // we only include password if the username is not empty.
+    if (parsedURL.password) {
+      // Result: <username>:<password>
+      auth = auth.concat(':', parsedURL.password);
+    }
+  }
+
+  const socketURLAuth = auth;
+
+  // In case the host is a raw IPv6 address, it can be enclosed in
+  // the brackets as the brackets are needed in the final URL string.
+  // Need to remove those as url.format blindly adds its own set of brackets
+  // if the host string contains colons. That would lead to non-working
+  // double brackets (e.g. [[::]]) host
+  //
+  // All of these sock url params are optionally passed in through resourceQuery,
+  // so we need to fall back to the default if they are not provided
+  const socketURLHostname = (
+    getURLSearchParam('host') ||
+    hostname ||
+    'localhost'
+  ).replace(/^\[(.*)\]$/, '$1');
+
+  if (!port || port === '0') {
+    port = self.location.port;
+  }
+
+  const socketURLPort = getURLSearchParam('port') || port;
+
+  // If path is provided it'll be passed in via the resourceQuery as a
+  // query param so it has to be parsed out of the querystring in order for the
+  // client to open the socket to the correct location.
+  const socketURLPathname = getURLSearchParam('path') || '/ws';
+
+  return url.format({
+    protocol: socketURLProtocol,
+    auth: socketURLAuth,
+    hostname: socketURLHostname,
+    port: socketURLPort,
+    pathname: socketURLPathname,
+    slashes: true,
+  });
+}
+
+module.exports = createSocketURL;
diff --git a/client-src/utils/createSocketUrl.js b/client-src/utils/createSocketUrl.js
deleted file mode 100644
index b2f7eba15d..0000000000
--- a/client-src/utils/createSocketUrl.js
+++ /dev/null
@@ -1,100 +0,0 @@
-'use strict';
-
-const url = require('url');
-const getCurrentScriptSource = require('./getCurrentScriptSource');
-
-function createSocketUrl(resourceQuery, currentLocation) {
-  let urlParts;
-
-  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
-    // If this bundle is inlined, use the resource query to get the correct url.
-    // format is like `?http://0.0.0.0:8096&port=8097&host=localhost`
-    urlParts = url.parse(
-      resourceQuery
-        // strip leading `?` from query string to get a valid URL
-        .substr(1)
-        // replace first `&` with `?` to have a valid query string
-        .replace('&', '?'),
-      true
-    );
-  } else {
-    // Else, get the url from the <script> this file was called with.
-    const scriptHost = getCurrentScriptSource();
-    urlParts = url.parse(scriptHost || '/', true, true);
-  }
-
-  // Use parameter to allow passing location in unit tests
-  if (typeof currentLocation === 'string' && currentLocation !== '') {
-    currentLocation = url.parse(currentLocation);
-  } else {
-    currentLocation = self.location;
-  }
-
-  return getSocketUrl(urlParts, currentLocation);
-}
-
-/*
- * Gets socket URL based on Script Source/Location
- * (scriptSrc: URL, location: URL) -> URL
- */
-function getSocketUrl(urlParts, loc) {
-  const { auth, query } = urlParts;
-  let { hostname, protocol, port } = urlParts;
-
-  const isInaddrAny = hostname === '0.0.0.0' || hostname === '::';
-
-  if (!port || port === '0') {
-    port = loc.port;
-  }
-
-  // check ipv4 and ipv6 `all hostname`
-  // why do we need this check?
-  // hostname n/a for file protocol (example, when using electron, ionic)
-  // see: https://github.com/webpack/webpack-dev-server/pull/384
-  if (isInaddrAny && loc.hostname && loc.protocol.indexOf('http') === 0) {
-    hostname = loc.hostname;
-  }
-
-  // `hostname` can be empty when the script path is relative. In that case, specifying
-  // a protocol would result in an invalid URL.
-  // When https is used in the app, secure websockets are always necessary
-  // because the browser doesn't accept non-secure websockets.
-  if (
-    hostname &&
-    hostname !== '127.0.0.1' &&
-    (loc.protocol === 'https:' || isInaddrAny)
-  ) {
-    protocol = loc.protocol;
-  }
-
-  // all of these sock url params are optionally passed in through
-  // resourceQuery, so we need to fall back to the default if
-  // they are not provided
-  let host = query.host || hostname;
-  const path = query.path || '/ws';
-  let portOption = query.port || port;
-
-  if (portOption === 'location') {
-    portOption = loc.port;
-  }
-
-  // In case the host is a raw IPv6 address, it can be enclosed in
-  // the brackets as the brackets are needed in the final URL string.
-  // Need to remove those as url.format blindly adds its own set of brackets
-  // if the host string contains colons. That would lead to non-working
-  // double brackets (e.g. [[::]]) host
-  host = typeof host === 'string' ? host.replace(/^\[(.*)\]$/, '$1') : host;
-
-  return url.format({
-    protocol,
-    auth,
-    hostname: host,
-    port: portOption,
-    // If path is provided it'll be passed in via the resourceQuery as a
-    // query param so it has to be parsed out of the querystring in order for the
-    // client to open the socket to the correct location.
-    pathname: path,
-  });
-}
-
-module.exports = createSocketUrl;
diff --git a/client-src/utils/getCurrentScriptSource.js b/client-src/utils/getCurrentScriptSource.js
index 7e622fbf16..737b16fc27 100644
--- a/client-src/utils/getCurrentScriptSource.js
+++ b/client-src/utils/getCurrentScriptSource.js
@@ -6,13 +6,21 @@ function getCurrentScriptSource() {
   if (document.currentScript) {
     return document.currentScript.getAttribute('src');
   }
-  // Fall back to getting all scripts in the document.
+
+  // Fallback to getting all scripts running in the document.
   const scriptElements = document.scripts || [];
-  const currentScript = scriptElements[scriptElements.length - 1];
+  const scriptElementsWithSrc = Array.prototype.filter.call(
+    scriptElements,
+    (element) => element.getAttribute('src')
+  );
+
+  if (scriptElementsWithSrc.length > 0) {
+    const currentScript =
+      scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
 
-  if (currentScript) {
     return currentScript.getAttribute('src');
   }
+
   // Fail as there was no script to use.
   throw new Error('[webpack-dev-server] Failed to get current script source.');
 }
diff --git a/client-src/utils/parseURL.js b/client-src/utils/parseURL.js
new file mode 100644
index 0000000000..da077db269
--- /dev/null
+++ b/client-src/utils/parseURL.js
@@ -0,0 +1,48 @@
+'use strict';
+
+const url = require('url');
+const getCurrentScriptSource = require('./getCurrentScriptSource');
+
+function parseURL(resourceQuery) {
+  let options;
+
+  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
+    // If this bundle is inlined, use the resource query to get the correct url.
+    // format is like `?http://0.0.0.0:8096&port=8097&host=localhost`
+    options = url.parse(
+      resourceQuery
+        // strip leading `?` from query string to get a valid URL
+        .substr(1)
+        // replace first `&` with `?` to have a valid query string
+        .replace('&', '?'),
+      true
+    );
+  } else {
+    // Else, get the url from the <script> this file was called with.
+    const scriptSource = getCurrentScriptSource();
+
+    if (scriptSource) {
+      let scriptSourceURL;
+
+      try {
+        // The placeholder `baseURL` with `window.location.href`,
+        // is to allow parsing of path-relative or protocol-relative URLs,
+        // and will have no effect if `scriptSource` is a fully valid URL.
+        scriptSourceURL = new URL(scriptSource, self.location.href);
+      } catch (error) {
+        // URL parsing failed, do nothing.
+        // We will still proceed to see if we can recover using `resourceQuery`
+      }
+
+      if (scriptSourceURL) {
+        options = scriptSourceURL;
+      }
+    } else {
+      options = url.parse(self.location.href, true, true);
+    }
+  }
+
+  return options;
+}
+
+module.exports = parseURL;
diff --git a/client-src/utils/reloadApp.js b/client-src/utils/reloadApp.js
index 4b81b43069..36206eda53 100644
--- a/client-src/utils/reloadApp.js
+++ b/client-src/utils/reloadApp.js
@@ -44,7 +44,9 @@ function reloadApp(
 
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
+
     log.info('App updated. Reloading...');
+
     rootWindow.location.reload();
   }
 }
diff --git a/lib/Server.js b/lib/Server.js
index debcfb4cbb..abfa911fe4 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -581,10 +581,6 @@ class Server {
         }
       });
 
-      if (this.options.client.logging) {
-        this.sockWrite([connection], 'logging', this.options.client.logging);
-      }
-
       if (this.options.hot === true || this.options.hot === 'only') {
         this.sockWrite([connection], 'hot');
       }
diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
index cbb77f69a6..cd9118028c 100644
--- a/lib/utils/DevServerPlugin.js
+++ b/lib/utils/DevServerPlugin.js
@@ -53,10 +53,16 @@ class DevServerPlugin {
         ? `&port=${options.client.port}`
         : '';
 
+    /** @type {string} */
+    const logging =
+      options.client && options.client.logging
+        ? `&logging=${options.client.logging}`
+        : '';
+
     /** @type {string} */
     const clientEntry = `${require.resolve(
       '../../client/'
-    )}?${domain}${host}${path}${port}`;
+    )}?${domain}${host}${path}${port}${logging}`;
 
     /** @type {(string[] | string)} */
     let hotEntry;
diff --git a/lib/utils/createDomain.js b/lib/utils/createDomain.js
index 72ea414d69..58b6523e84 100644
--- a/lib/utils/createDomain.js
+++ b/lib/utils/createDomain.js
@@ -4,7 +4,7 @@ const url = require('url');
 
 function createDomain(options, server) {
   const protocol = options.https ? 'https' : 'http';
-  // use location hostname and port by default in createSocketUrl
+  // use location hostname and port by default in createSocketURL
   // ipv6 detection is not required as 0.0.0.0 is just used as a placeholder
   let hostname;
 
diff --git a/test/client/__snapshots__/index.test.js.snap.webpack4 b/test/client/__snapshots__/index.test.js.snap.webpack4
index cdf0b50c10..73afe4666f 100644
--- a/test/client/__snapshots__/index.test.js.snap.webpack4
+++ b/test/client/__snapshots__/index.test.js.snap.webpack4
@@ -48,6 +48,7 @@ Object {
   "hotReload": true,
   "initial": false,
   "liveReload": false,
+  "logging": "info",
   "useErrorOverlay": false,
   "useProgress": false,
   "useWarningOverlay": false,
@@ -104,3 +105,5 @@ Array [
   },
 ]
 `;
+
+exports[`index should update log level if options is passed 1`] = `"info"`;
diff --git a/test/client/__snapshots__/index.test.js.snap.webpack5 b/test/client/__snapshots__/index.test.js.snap.webpack5
index cdf0b50c10..73afe4666f 100644
--- a/test/client/__snapshots__/index.test.js.snap.webpack5
+++ b/test/client/__snapshots__/index.test.js.snap.webpack5
@@ -48,6 +48,7 @@ Object {
   "hotReload": true,
   "initial": false,
   "liveReload": false,
+  "logging": "info",
   "useErrorOverlay": false,
   "useProgress": false,
   "useWarningOverlay": false,
@@ -104,3 +105,5 @@ Array [
   },
 ]
 `;
+
+exports[`index should update log level if options is passed 1`] = `"info"`;
diff --git a/test/client/clients/SockJSClient.test.js b/test/client/clients/SockJSClient.test.js
index ec9e2e87e8..3a9a924f6e 100644
--- a/test/client/clients/SockJSClient.test.js
+++ b/test/client/clients/SockJSClient.test.js
@@ -74,21 +74,6 @@ describe('SockJSClient', () => {
         done();
       }, 3000);
     });
-
-    it('should change the protocol from chrome-extension to http', (done) => {
-      const client = new SockJSClient('chrome-extension://localhost');
-
-      expect(client.sock.url).toEqual('http://localhost');
-
-      done();
-    });
-
-    it('should change the protocol from file to http', (done) => {
-      const client = new SockJSClient('file://localhost');
-      expect(client.sock.url).toEqual('http://localhost');
-
-      done();
-    });
   });
 
   afterAll((done) => {
diff --git a/test/client/clients/WebsocketClient.test.js b/test/client/clients/WebsocketClient.test.js
index 5ae2f8d0a8..3d8dc7772c 100644
--- a/test/client/clients/WebsocketClient.test.js
+++ b/test/client/clients/WebsocketClient.test.js
@@ -42,7 +42,7 @@ describe('WebsocketClient', () => {
         }, 1000);
       });
 
-      const client = new WebsocketClient(`http://localhost:${port}/ws-server`);
+      const client = new WebsocketClient(`ws://localhost:${port}/ws-server`);
       const data = [];
 
       client.onOpen(() => {
@@ -68,22 +68,6 @@ describe('WebsocketClient', () => {
         done();
       }, 3000);
     });
-
-    it('should change the protocol from chrome-extension to http', (done) => {
-      const client = new WebsocketClient('chrome-extension://localhost/');
-
-      expect(client.client.url).toEqual('ws://localhost/');
-
-      done();
-    });
-
-    it('should change the protocol from file to http', (done) => {
-      const client = new WebsocketClient('file://localhost/');
-
-      expect(client.client.url).toEqual('ws://localhost/');
-
-      done();
-    });
   });
 
   afterAll((done) => {
diff --git a/test/client/index.test.js b/test/client/index.test.js
index 0eae0bfbf5..818e156264 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -20,6 +20,7 @@ describe('index', () => {
         warn: jest.fn(),
         error: jest.fn(),
       },
+      setLogLevel: jest.fn(),
     });
     log = require('../../client-src/utils/log');
 
@@ -42,8 +43,17 @@ describe('index', () => {
     jest.setMock('../../client-src/utils/sendMessage.js', jest.fn());
     sendMessage = require('../../client-src/utils/sendMessage');
 
+    // getUrlOptions
+    jest.setMock('../../client-src/utils/parseURL.js', () => {
+      return {
+        query: {
+          logging: 'info',
+        },
+      };
+    });
+
     // createSocketUrl
-    jest.setMock('../../client-src/utils/createSocketUrl.js', () => 'mock-url');
+    jest.setMock('../../client-src/utils/createSocketURL.js', () => 'mock-url');
 
     // issue: https://github.com/jsdom/jsdom/issues/2112
     delete window.location;
@@ -101,11 +111,6 @@ describe('index', () => {
     expect(overlay.clear).toBeCalled();
   });
 
-  // TODO: need to mock require.context
-  test.skip("should run onSocketMessage['logging']", () => {
-    onSocketMessage.logging();
-  });
-
   test("should run onSocketMessage.progress and onSocketMessage['progress-update']", () => {
     onSocketMessage.progress(false);
     onSocketMessage['progress-update']({
@@ -230,4 +235,8 @@ describe('index', () => {
     expect(log.log.error.mock.calls[0][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });
+
+  test('should update log level if options is passed', () => {
+    expect(log.setLogLevel.mock.calls[0][0]).toMatchSnapshot();
+  });
 });
diff --git a/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack4 b/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack4
deleted file mode 100644
index 548fa88628..0000000000
--- a/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack4
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`createSocketUrl should return the url when __resourceQuery is ?test 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is file://filename 1`] = `"file://filename/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://0.0.0.0 1`] = `"http://localhost/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://localhost:123 1`] = `"https://localhost:123/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is undefined 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is ?test 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is file://filename 1`] = `"file://filename/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://0.0.0.0 1`] = `"http://localhost/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://localhost:123 1`] = `"https://localhost:123/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is undefined 1`] = `"/ws"`;
diff --git a/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack5 b/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack5
deleted file mode 100644
index 548fa88628..0000000000
--- a/test/client/utils/__snapshots__/createSocketUrl.test.js.snap.webpack5
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`createSocketUrl should return the url when __resourceQuery is ?test 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is file://filename 1`] = `"file://filename/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://0.0.0.0 1`] = `"http://localhost/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is https://localhost:123 1`] = `"https://localhost:123/ws"`;
-
-exports[`createSocketUrl should return the url when __resourceQuery is undefined 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is ?test 1`] = `"/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is file://filename 1`] = `"file://filename/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://0.0.0.0 1`] = `"http://localhost/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://127.0.0.1 1`] = `"http://127.0.0.1/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://user:pass@[::]:8080 1`] = `"http://user:pass@localhost:8080/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is http://user:password@localhost/ 1`] = `"http://user:password@localhost/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://example.com/path/foo.js 1`] = `"https://example.com/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is https://localhost:123 1`] = `"https://localhost:123/ws"`;
-
-exports[`createSocketUrl should return the url when the current script source is undefined 1`] = `"/ws"`;
diff --git a/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4 b/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4
index b3081f1663..e44b5ea03e 100644
--- a/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4
+++ b/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack4
@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`getCurrentScriptSource should fail when script source doesn't exist 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
diff --git a/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5 b/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5
index b3081f1663..e44b5ea03e 100644
--- a/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5
+++ b/test/client/utils/__snapshots__/getCurrentScriptSource.test.js.snap.webpack5
@@ -1,3 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`getCurrentScriptSource should fail when script source doesn't exist 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+exports[`'getCurrentScriptSource' function should fail when 'document.currentScript' doesn't exist and no 'script' tags 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when 'document.scripts' doesn't exist and no scripts 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
+
+exports[`'getCurrentScriptSource' function should fail when no scripts with the 'scr' attribute 1`] = `[Error: [webpack-dev-server] Failed to get current script source.]`;
diff --git a/test/client/utils/__snapshots__/log.test.js.snap.webpack4 b/test/client/utils/__snapshots__/log.test.js.snap.webpack4
index 1a64ddbc17..0978ec8049 100644
--- a/test/client/utils/__snapshots__/log.test.js.snap.webpack4
+++ b/test/client/utils/__snapshots__/log.test.js.snap.webpack4
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`log should set log level via setLogLevel 1`] = `
+exports[`'log' function should set log level via setLogLevel 1`] = `
 Array [
   Array [
     Object {
diff --git a/test/client/utils/__snapshots__/log.test.js.snap.webpack5 b/test/client/utils/__snapshots__/log.test.js.snap.webpack5
index 1a64ddbc17..0978ec8049 100644
--- a/test/client/utils/__snapshots__/log.test.js.snap.webpack5
+++ b/test/client/utils/__snapshots__/log.test.js.snap.webpack5
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`log should set log level via setLogLevel 1`] = `
+exports[`'log' function should set log level via setLogLevel 1`] = `
 Array [
   Array [
     Object {
diff --git a/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack4 b/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack4
new file mode 100644
index 0000000000..04816ac822
--- /dev/null
+++ b/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack4
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`'parseURL' function should return the url when __resourceQuery is '/' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": null,
+  "hostname": null,
+  "href": "/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": null,
+  "query": Object {},
+  "search": null,
+  "slashes": null,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'file://filename' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "filename",
+  "hostname": "filename",
+  "href": "file://filename/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "file:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://0.0.0.0' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "0.0.0.0",
+  "hostname": "0.0.0.0",
+  "href": "http://0.0.0.0/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://127.0.0.1' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "127.0.0.1",
+  "hostname": "127.0.0.1",
+  "href": "http://127.0.0.1/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://user:pass@[::]:8080' 1`] = `
+Url {
+  "auth": "user:pass",
+  "hash": null,
+  "host": "[::]:8080",
+  "hostname": "::",
+  "href": "http://user:pass@[::]:8080/",
+  "path": "/",
+  "pathname": "/",
+  "port": "8080",
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://user:password@localhost/' 1`] = `
+Url {
+  "auth": "user:password",
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://user:password@localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com/path' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/path",
+  "path": "/path",
+  "pathname": "/path",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com/path/foo.js' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/path/foo.js",
+  "path": "/path/foo.js",
+  "pathname": "/path/foo.js",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://localhost:123' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost:123",
+  "hostname": "localhost",
+  "href": "https://localhost:123/",
+  "path": "/",
+  "pathname": "/",
+  "port": "123",
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'test' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": null,
+  "hostname": null,
+  "href": "test",
+  "path": "test",
+  "pathname": "test",
+  "port": null,
+  "protocol": null,
+  "query": Object {},
+  "search": null,
+  "slashes": null,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'undefined' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when the current script source is '/' 1`] = `"http://localhost/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'file://filename' 1`] = `"file://filename/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://0.0.0.0' 1`] = `"http://0.0.0.0/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://127.0.0.1' 1`] = `"http://127.0.0.1/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://user:pass@[::]:8080' 1`] = `"http://user:pass@[::]:8080/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://user:password@localhost/' 1`] = `"http://user:password@localhost/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com' 1`] = `"https://example.com/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com/path' 1`] = `"https://example.com/path"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com/path/foo.js' 1`] = `"https://example.com/path/foo.js"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://localhost:123' 1`] = `"https://localhost:123/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'test' 1`] = `"http://localhost/test"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'undefined' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
diff --git a/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack5 b/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack5
new file mode 100644
index 0000000000..04816ac822
--- /dev/null
+++ b/test/client/utils/__snapshots__/parseURL.test.js.snap.webpack5
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`'parseURL' function should return the url when __resourceQuery is '/' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": null,
+  "hostname": null,
+  "href": "/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": null,
+  "query": Object {},
+  "search": null,
+  "slashes": null,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'file://filename' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "filename",
+  "hostname": "filename",
+  "href": "file://filename/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "file:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://0.0.0.0' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "0.0.0.0",
+  "hostname": "0.0.0.0",
+  "href": "http://0.0.0.0/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://127.0.0.1' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "127.0.0.1",
+  "hostname": "127.0.0.1",
+  "href": "http://127.0.0.1/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://user:pass@[::]:8080' 1`] = `
+Url {
+  "auth": "user:pass",
+  "hash": null,
+  "host": "[::]:8080",
+  "hostname": "::",
+  "href": "http://user:pass@[::]:8080/",
+  "path": "/",
+  "pathname": "/",
+  "port": "8080",
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'http://user:password@localhost/' 1`] = `
+Url {
+  "auth": "user:password",
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://user:password@localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com/path' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/path",
+  "path": "/path",
+  "pathname": "/path",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://example.com/path/foo.js' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "example.com",
+  "hostname": "example.com",
+  "href": "https://example.com/path/foo.js",
+  "path": "/path/foo.js",
+  "pathname": "/path/foo.js",
+  "port": null,
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'https://localhost:123' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost:123",
+  "hostname": "localhost",
+  "href": "https://localhost:123/",
+  "path": "/",
+  "pathname": "/",
+  "port": "123",
+  "protocol": "https:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'test' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": null,
+  "hostname": null,
+  "href": "test",
+  "path": "test",
+  "pathname": "test",
+  "port": null,
+  "protocol": null,
+  "query": Object {},
+  "search": null,
+  "slashes": null,
+}
+`;
+
+exports[`'parseURL' function should return the url when __resourceQuery is 'undefined' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
+
+exports[`'parseURL' function should return the url when the current script source is '/' 1`] = `"http://localhost/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'file://filename' 1`] = `"file://filename/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://0.0.0.0' 1`] = `"http://0.0.0.0/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://127.0.0.1' 1`] = `"http://127.0.0.1/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://user:pass@[::]:8080' 1`] = `"http://user:pass@[::]:8080/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'http://user:password@localhost/' 1`] = `"http://user:password@localhost/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com' 1`] = `"https://example.com/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com/path' 1`] = `"https://example.com/path"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://example.com/path/foo.js' 1`] = `"https://example.com/path/foo.js"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'https://localhost:123' 1`] = `"https://localhost:123/"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'test' 1`] = `"http://localhost/test"`;
+
+exports[`'parseURL' function should return the url when the current script source is 'undefined' 1`] = `
+Url {
+  "auth": null,
+  "hash": null,
+  "host": "localhost",
+  "hostname": "localhost",
+  "href": "http://localhost/",
+  "path": "/",
+  "pathname": "/",
+  "port": null,
+  "protocol": "http:",
+  "query": Object {},
+  "search": null,
+  "slashes": true,
+}
+`;
diff --git a/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack4 b/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack4
index 6eff258794..a52a3a6dfb 100644
--- a/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack4
+++ b/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack4
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`reloadApp should run hot 1`] = `"App hot update..."`;
+exports[`'reloadApp' function should run hot 1`] = `"App hot update..."`;
 
-exports[`reloadApp should run hot 2`] = `"webpackHotUpdate"`;
+exports[`'reloadApp' function should run hot 2`] = `"webpackHotUpdate"`;
 
-exports[`reloadApp should run hot 3`] = `
+exports[`'reloadApp' function should run hot 3`] = `
 Array [
   "webpackHotUpdatehash",
   "*",
 ]
 `;
 
-exports[`reloadApp should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`;
+exports[`'reloadApp' function should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`;
 
-exports[`reloadApp should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`;
+exports[`'reloadApp' function should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`;
diff --git a/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack5 b/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack5
index 6eff258794..a52a3a6dfb 100644
--- a/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack5
+++ b/test/client/utils/__snapshots__/reloadApp.test.js.snap.webpack5
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`reloadApp should run hot 1`] = `"App hot update..."`;
+exports[`'reloadApp' function should run hot 1`] = `"App hot update..."`;
 
-exports[`reloadApp should run hot 2`] = `"webpackHotUpdate"`;
+exports[`'reloadApp' function should run hot 2`] = `"webpackHotUpdate"`;
 
-exports[`reloadApp should run hot 3`] = `
+exports[`'reloadApp' function should run hot 3`] = `
 Array [
   "webpackHotUpdatehash",
   "*",
 ]
 `;
 
-exports[`reloadApp should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`;
+exports[`'reloadApp' function should run liveReload when protocol is about: 1`] = `"App updated. Reloading..."`;
 
-exports[`reloadApp should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`;
+exports[`'reloadApp' function should run liveReload when protocol is http: 1`] = `"App updated. Reloading..."`;
diff --git a/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack4 b/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack4
index c18bffaa04..32043a7ca9 100644
--- a/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack4
+++ b/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack4
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`sendMessage should run self.postMessage 1`] = `
+exports[`'sendMessage' function should run self.postMessage 1`] = `
 Array [
   Object {
     "data": "bar",
diff --git a/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack5 b/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack5
index c18bffaa04..32043a7ca9 100644
--- a/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack5
+++ b/test/client/utils/__snapshots__/sendMessage.test.js.snap.webpack5
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`sendMessage should run self.postMessage 1`] = `
+exports[`'sendMessage' function should run self.postMessage 1`] = `
 Array [
   Object {
     "data": "bar",
diff --git a/test/client/utils/createSocketURL.test.js b/test/client/utils/createSocketURL.test.js
new file mode 100644
index 0000000000..907fee2a6d
--- /dev/null
+++ b/test/client/utils/createSocketURL.test.js
@@ -0,0 +1,141 @@
+'use strict';
+
+describe("'createSocketURL' function ", () => {
+  const samples = [
+    // __resourceQuery, location and socket URL
+    ['?http://example.com', 'http://example.com', 'ws://example.com/ws'],
+    ['?http://example.com', 'http://something.com', 'ws://example.com/ws'],
+    [null, 'http://example.com', 'ws://example.com/ws'],
+    ['?https://example.com', 'https://example.com', 'wss://example.com/ws'],
+    [null, 'https://example.com', 'wss://example.com/ws'],
+    [
+      '?http://example.com&port=8080',
+      'http://example.com:8080',
+      'ws://example.com:8080/ws',
+    ],
+    [
+      '?http://example.com:0',
+      'http://example.com:8080',
+      'ws://example.com:8080/ws',
+    ],
+    [null, 'http://example.com:8080', 'ws://example.com:8080/ws'],
+    [
+      '?http://example.com/path/foo.js',
+      'http://example.com/foo/bar',
+      'ws://example.com/ws',
+    ],
+    [null, 'http://example.com/foo/bar', 'ws://example.com/ws'],
+    [
+      '?http://user:password@localhost/',
+      'http://user:password@localhost/',
+      'ws://user:password@localhost/ws',
+    ],
+    [
+      null,
+      'http://user:password@localhost/',
+      'ws://user:password@localhost/ws',
+    ],
+    [
+      '?http://user:password@localhost:8080/',
+      'http://user:password@localhost/',
+      'ws://user:password@localhost:8080/ws',
+    ],
+    [null, 'http://user@localhost:8080/', 'ws://user@localhost:8080/ws'],
+    [
+      null,
+      'http://user:password@localhost:8080/',
+      'ws://user:password@localhost:8080/ws',
+    ],
+    ['?http://0.0.0.0', 'http://127.0.0.1', 'ws://127.0.0.1/ws'],
+    ['?http://0.0.0.0', 'http://192.168.0.1', 'ws://192.168.0.1/ws'],
+    ['?http://0.0.0.0', 'https://192.168.0.1', 'wss://192.168.0.1/ws'],
+    ['?http://0.0.0.0', 'https://example.com', 'wss://example.com/ws'],
+    [
+      '?http://0.0.0.0',
+      'https://example.com:8080',
+      'wss://example.com:8080/ws',
+    ],
+    [
+      '?https://0.0.0.0',
+      'https://example.com:8080',
+      'wss://example.com:8080/ws',
+    ],
+    [
+      '?http://0.0.0.0&port=9090',
+      'https://example.com',
+      'wss://example.com:9090/ws',
+    ],
+    [
+      '?http://0.0.0.0&port=9090',
+      'https://example.com:8080',
+      'wss://example.com:9090/ws',
+    ],
+    ['?http://localhost', 'http://localhost', 'ws://localhost/ws'],
+    [
+      '?http://localhost:8080',
+      'http://localhost:8080',
+      'ws://localhost:8080/ws',
+    ],
+    [
+      '?https://localhost:8080',
+      'https://localhost:8080',
+      'wss://localhost:8080/ws',
+    ],
+    [null, 'https://localhost:8080', 'wss://localhost:8080/ws'],
+    ['?http://127.0.0.1', 'http://something.com', 'ws://127.0.0.1/ws'],
+
+    ['?http://127.0.0.1', 'https://something.com', 'ws://127.0.0.1/ws'],
+
+    ['?https://127.0.0.1', 'http://something.com', 'wss://127.0.0.1/ws'],
+    [null, 'http://127.0.0.1', 'ws://127.0.0.1/ws'],
+    [null, 'http://127.0.0.1:8080', 'ws://127.0.0.1:8080/ws'],
+    [null, 'https://127.0.0.1', 'wss://127.0.0.1/ws'],
+    [
+      '?https://example.com&host=example.com',
+      'http://something.com',
+      'wss://example.com/ws',
+    ],
+    [
+      '?https://example.com&path=custom',
+      'http://something.com',
+      'wss://example.com/custom',
+    ],
+    [
+      '?https://example.com&path=/custom',
+      'http://something.com',
+      'wss://example.com/custom',
+    ],
+    ['?http://[::]', 'http://something.com', 'ws://something.com/ws'],
+    ['?http://[::]', 'https://something.com', 'wss://something.com/ws'],
+    ['?http://[::1]:8080/', 'http://[::1]:8080/', 'ws://[::1]:8080/ws'],
+    ['?https://[::1]:8080/', 'http://[::1]:8080/', 'wss://[::1]:8080/ws'],
+    [null, 'http://[::1]:8080/', 'ws://[::1]:8080/ws'],
+    [null, 'https://[::1]:8080/', 'wss://[::1]:8080/ws'],
+    [null, 'file:///home/user/project/index.html', 'ws://localhost/ws'],
+    [null, 'chrome-extension://localhost/', 'ws://localhost/ws'],
+    [null, 'file://localhost/', 'ws://localhost/ws'],
+  ];
+
+  samples.forEach(([__resourceQuery, location, expected]) => {
+    jest.doMock('../../../client-src/utils/getCurrentScriptSource', () => () =>
+      new URL('./entry.js', location).toString()
+    );
+
+    const createSocketURL = require('../../../client-src/utils/createSocketURL');
+    const parseURL = require('../../../client-src/utils/parseURL');
+
+    test(`should return '${expected}' socket URL when '__resourceQuery' is '${__resourceQuery}' and 'self.location' is '${location}'`, () => {
+      const selfLocation = new URL(location);
+
+      delete window.location;
+
+      window.location = selfLocation;
+
+      const parsedURL = parseURL(__resourceQuery);
+
+      expect(createSocketURL(parsedURL)).toBe(expected);
+    });
+
+    jest.resetModules();
+  });
+});
diff --git a/test/client/utils/createSocketUrl.test.js b/test/client/utils/createSocketUrl.test.js
deleted file mode 100644
index 67b1b877c2..0000000000
--- a/test/client/utils/createSocketUrl.test.js
+++ /dev/null
@@ -1,113 +0,0 @@
-'use strict';
-
-describe('createSocketUrl', () => {
-  const samples = [
-    '?test',
-    'https://example.com',
-    'https://example.com/path',
-    'https://example.com/path/foo.js',
-    'http://user:password@localhost/',
-    'http://0.0.0.0',
-    'https://localhost:123',
-    'http://user:pass@[::]:8080',
-    'http://127.0.0.1',
-    'file://filename',
-    // eslint-disable-next-line no-undefined
-    undefined,
-  ];
-
-  samples.forEach((url) => {
-    jest.doMock('../../../client-src/utils/getCurrentScriptSource', () => () =>
-      url
-    );
-
-    const createSocketUrl = require('../../../client-src/utils/createSocketUrl');
-
-    test(`should return the url when __resourceQuery is ${url}`, () => {
-      const query = url ? url.querystring : url;
-      expect(createSocketUrl(query)).toMatchSnapshot();
-    });
-
-    test(`should return the url when the current script source is ${url}`, () => {
-      expect(createSocketUrl()).toMatchSnapshot();
-    });
-
-    // put here because resetModules mustn't be reset when L20 is finished
-    jest.resetModules();
-  });
-
-  const samples2 = [
-    // script source,       location,                output socket URL
-    ['http://example.com', 'https://something.com', 'https://example.com/ws'],
-    ['http://127.0.0.1', 'https://something.com', 'http://127.0.0.1/ws'],
-    ['http://0.0.0.0', 'https://something.com', 'https://something.com/ws'],
-    ['http://0.0.0.0', 'http://something.com', 'http://something.com/ws'],
-    ['http://[::]', 'https://something.com', 'https://something.com/ws'],
-    ['http://example.com', 'http://something.com', 'http://example.com/ws'],
-    ['https://example.com', 'http://something.com', 'https://example.com/ws'],
-  ];
-
-  samples2.forEach(([scriptSrc, loc, expected]) => {
-    jest.doMock(
-      '../../../client-src/utils/getCurrentScriptSource.js',
-      () => () => scriptSrc
-    );
-
-    const createSocketUrl = require('../../../client-src/utils/createSocketUrl');
-
-    test(`should return socket ${expected} for script source ${scriptSrc} and location ${loc}`, () => {
-      // eslint-disable-next-line no-undefined
-      expect(createSocketUrl(undefined, loc).toString()).toEqual(expected);
-    });
-
-    jest.resetModules();
-  });
-
-  const samples3 = [
-    // script source,       location,                output socket URL
-    ['?http://example.com', 'https://something.com', 'https://example.com/ws'],
-    ['?http://127.0.0.1', 'https://something.com', 'http://127.0.0.1/ws'],
-    ['?http://0.0.0.0', 'https://something.com', 'https://something.com/ws'],
-    ['?http://0.0.0.0', 'http://something.com', 'http://something.com/ws'],
-    ['?http://[::]', 'https://something.com', 'https://something.com/ws'],
-    ['?http://example.com', 'http://something.com', 'http://example.com/ws'],
-    ['?https://example.com', 'http://something.com', 'https://example.com/ws'],
-    [
-      '?https://example.com?host=asdf',
-      'http://something.com',
-      'https://asdf/ws',
-    ],
-    [
-      '?https://example.com?port=34',
-      'http://something.com',
-      'https://example.com:34/ws',
-    ],
-    [
-      '?https://example.com?path=xxx',
-      'http://something.com',
-      'https://example.com/xxx',
-    ],
-    [
-      '?http://0.0.0.0:8096&port=8097',
-      'http://localhost',
-      'http://localhost:8097/ws',
-    ],
-    [
-      '?http://example.com:8096&port=location',
-      'http://something.com',
-      'http://example.com/ws',
-    ],
-    [
-      '?http://0.0.0.0:8096&port=location',
-      'http://localhost:3000',
-      'http://localhost:3000/ws',
-    ],
-  ];
-  samples3.forEach(([scriptSrc, loc, expected]) => {
-    test(`should return socket ${expected} for query ${scriptSrc} and location ${loc}`, () => {
-      const createSocketUrl = require('../../../client-src/utils/createSocketUrl');
-
-      expect(createSocketUrl(scriptSrc, loc).toString()).toEqual(expected);
-    });
-  });
-});
diff --git a/test/client/utils/getCurrentScriptSource.test.js b/test/client/utils/getCurrentScriptSource.test.js
index 4f726fadaa..602c650091 100644
--- a/test/client/utils/getCurrentScriptSource.test.js
+++ b/test/client/utils/getCurrentScriptSource.test.js
@@ -2,10 +2,11 @@
 
 const getCurrentScriptSource = require('../../../client-src/utils/getCurrentScriptSource');
 
-describe('getCurrentScriptSource', () => {
+describe("'getCurrentScriptSource' function", () => {
   afterEach(() => {
     Object.defineProperty(document, 'currentScript', {
-      value: null,
+      // eslint-disable-next-line no-undefined
+      value: undefined,
       writable: true,
     });
     Object.defineProperty(document, 'scripts', {
@@ -14,16 +15,17 @@ describe('getCurrentScriptSource', () => {
     });
   });
 
-  test("should fail when script source doesn't exist", () => {
+  test("should fail when 'document.currentScript' doesn't exist and no 'script' tags", () => {
     try {
       getCurrentScriptSource();
-    } catch (e) {
-      expect(e).toMatchSnapshot();
+    } catch (error) {
+      expect(error).toMatchSnapshot();
     }
   });
 
-  test('should return src if document.currentScript exists', () => {
+  test("should return src when 'document.currentScript' exists", () => {
     const elm = document.createElement('script');
+
     elm.setAttribute('src', 'foo');
 
     Object.defineProperty(document, 'currentScript', {
@@ -33,17 +35,47 @@ describe('getCurrentScriptSource', () => {
     expect(getCurrentScriptSource()).toEqual('foo');
   });
 
-  test('should return src', () => {
-    const elms = ['foo', 'bar'].map((src) => {
-      const elm = document.createElement('script');
-      elm.setAttribute('src', src);
-      return elm;
+  test("should fail when 'document.scripts' doesn't exist and no scripts", () => {
+    Object.defineProperty(document, 'scripts', {
+      // eslint-disable-next-line no-undefined
+      value: undefined,
+      writable: true,
+    });
+
+    try {
+      getCurrentScriptSource();
+    } catch (error) {
+      expect(error).toMatchSnapshot();
+    }
+  });
+
+  test("should return the 'src' attribute of the last 'script' tag", () => {
+    const elements = ['foo', 'bar'].map((src) => {
+      const element = document.createElement('script');
+
+      element.setAttribute('src', src);
+
+      return element;
     });
 
     Object.defineProperty(document, 'scripts', {
-      value: elms,
+      value: elements,
     });
 
     expect(getCurrentScriptSource()).toEqual('bar');
   });
+
+  test("should fail when no scripts with the 'scr' attribute", () => {
+    const elements = ['foo', 'bar'].map(() => document.createElement('script'));
+
+    Object.defineProperty(document, 'scripts', {
+      value: elements,
+    });
+
+    try {
+      getCurrentScriptSource();
+    } catch (error) {
+      expect(error).toMatchSnapshot();
+    }
+  });
 });
diff --git a/test/client/utils/log.test.js b/test/client/utils/log.test.js
index cb08cfe7b3..37e8b6c1fc 100644
--- a/test/client/utils/log.test.js
+++ b/test/client/utils/log.test.js
@@ -1,6 +1,6 @@
 'use strict';
 
-describe('log', () => {
+describe("'log' function", () => {
   let logMock;
   let setLogLevel;
 
diff --git a/test/client/utils/parseURL.test.js b/test/client/utils/parseURL.test.js
new file mode 100644
index 0000000000..9292ed7b23
--- /dev/null
+++ b/test/client/utils/parseURL.test.js
@@ -0,0 +1,39 @@
+'use strict';
+
+describe("'parseURL' function", () => {
+  const samples = [
+    'test',
+    '/',
+    'https://example.com',
+    'https://example.com/path',
+    'https://example.com/path/foo.js',
+    'http://user:password@localhost/',
+    'http://0.0.0.0',
+    'https://localhost:123',
+    'http://user:pass@[::]:8080',
+    'http://127.0.0.1',
+    'file://filename',
+    // eslint-disable-next-line no-undefined
+    undefined,
+  ];
+
+  samples.forEach((url) => {
+    jest.doMock(
+      '../../../client-src/utils/getCurrentScriptSource.js',
+      () => () => url
+    );
+
+    const parseURL = require('../../../client-src/utils/parseURL');
+
+    test(`should return the url when __resourceQuery is '${url}'`, () => {
+      expect(parseURL(url && `?${url}`)).toMatchSnapshot();
+    });
+
+    test(`should return the url when the current script source is '${url}'`, () => {
+      expect(parseURL()).toMatchSnapshot();
+    });
+
+    // put here because resetModules mustn't be reset when L20 is finished
+    jest.resetModules();
+  });
+});
diff --git a/test/client/utils/reloadApp.test.js b/test/client/utils/reloadApp.test.js
index 3c472f0ea8..d953198d00 100644
--- a/test/client/utils/reloadApp.test.js
+++ b/test/client/utils/reloadApp.test.js
@@ -1,6 +1,6 @@
 'use strict';
 
-describe('reloadApp', () => {
+describe("'reloadApp' function", () => {
   let reloadApp;
   let log;
   let locationValue;
diff --git a/test/client/utils/sendMessage.test.js b/test/client/utils/sendMessage.test.js
index 8c5815183d..d24b0de2d3 100644
--- a/test/client/utils/sendMessage.test.js
+++ b/test/client/utils/sendMessage.test.js
@@ -2,7 +2,7 @@
 
 const sendMessage = require('../../../client-src/utils/sendMessage');
 
-describe('sendMessage', () => {
+describe("'sendMessage' function", () => {
   afterEach(() => {
     jest.resetAllMocks();
   });
diff --git a/test/e2e/ClientOptions.test.js b/test/e2e/ClientOptions.test.js
index 76ba49d0c3..e0d5bb2248 100644
--- a/test/e2e/ClientOptions.test.js
+++ b/test/e2e/ClientOptions.test.js
@@ -382,7 +382,6 @@ describe('Client console.log', () => {
         hot: false,
       },
     },
-    // TODO: make client logging work as expected for HMR logs
     {
       title: 'client logging is none',
       options: {
diff --git a/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack4 b/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack4
index 27b0867bb4..92abcfef92 100644
--- a/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack4
@@ -3,21 +3,18 @@
 exports[`Client console.log client logging is none (default) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
 exports[`Client console.log client logging is none (sockjs) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
 exports[`Client console.log client logging is none (ws) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
diff --git a/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack5 b/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack5
index 27b0867bb4..92abcfef92 100644
--- a/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/ClientOptions.test.js.snap.webpack5
@@ -3,21 +3,18 @@
 exports[`Client console.log client logging is none (default) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
 exports[`Client console.log client logging is none (sockjs) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
 exports[`Client console.log client logging is none (ws) 1`] = `
 Array [
   "Hey.",
-  "[HMR] Waiting for update signal from WDS...",
 ]
 `;
 
diff --git a/test/fixtures/custom-client/CustomSockJSClient.js b/test/fixtures/custom-client/CustomSockJSClient.js
index 8412abeba7..b3d22e653d 100644
--- a/test/fixtures/custom-client/CustomSockJSClient.js
+++ b/test/fixtures/custom-client/CustomSockJSClient.js
@@ -9,7 +9,10 @@ const BaseClient = require('../../../client/clients/BaseClient');
 module.exports = class SockJSClient extends BaseClient {
   constructor(url) {
     super();
-    this.sock = new SockJS(url);
+
+    this.sock = new SockJS(
+      url.replace(/^ws:/i, 'http://').replace(/^wss:/i, 'https://')
+    );
   }
 
   static getClientPath(options) {