fix: ct testing support for node 17+ (#21430)

cli/lib/util.js

@@ -315,7 +315,7 @@ const util = {
     // To be removed when the Cypress binary pulls in the @cypress/webpack-batteries-included-preprocessor
     // version that has been updated to webpack >= 5.61, which no longer relies on
     // Node's builtin crypto.hash function.
-    if (process.versions && semver.satisfies(process.versions.node, '>=17.0.0') && process.versions.openssl.startsWith('3.')) {
+    if (process.versions && semver.satisfies(process.versions.node, '>=17.0.0') && semver.satisfies(process.versions.openssl, '>=3', { includePrerelease: true })) {
       opts.ORIGINAL_NODE_OPTIONS = `${opts.ORIGINAL_NODE_OPTIONS || ''} --openssl-legacy-provider`
     }
 

npm/webpack-dev-server/src/createWebpackDevServer.ts

@@ -68,7 +68,7 @@ function webpackDevServer4 (
   const { devServerConfig: { cypressConfig: { devServerPublicPathRoute } } } = config
   const WebpackDevServer = config.sourceWebpackModulesResult.webpackDevServer.module
   const webpackDevServerConfig = {
-    host: 'localhost',
+    host: '127.0.0.1',
     port: 'auto',
     // @ts-ignore
     ...finalWebpackConfig?.devServer,

npm/webpack-dev-server/test/devServer-e2e.spec.ts

@@ -12,7 +12,7 @@ import './support'
 const requestSpecFile = (file: string, port: number) => {
   return new Promise((res) => {
     const opts = {
-      host: 'localhost',
+      host: '127.0.0.1',
       port,
       path: encodeURI(file),
     }

packages/extension/gulpfile.ts

@@ -1,8 +1,9 @@
 import gulp from 'gulp'
 import rimraf from 'rimraf'
-import webpack from 'webpack'
 import * as cypressIcons from '@packages/icons'
-import webpackConfig from './webpack.config.js'
+import cp from 'child_process'
+import util from 'util'
+const exec = util.promisify(cp.exec)
 
 const clean = (done) => {
   rimraf('dist', done)
@@ -14,9 +15,7 @@ const manifest = () => {
 }
 
 const background = (cb) => {
-  const compiler = webpack(webpackConfig as webpack.Configuration)
-
-  compiler.run(cb)
+  exec('node ../../scripts/run-webpack.js').then(() => cb()).catch(cb)
 }
 
 const html = () => {

packages/extension/package.json

@@ -13,7 +13,7 @@
     "test-debug": "yarn test-unit --inspect-brk=5566",
     "test-unit": "cross-env NODE_ENV=test mocha -r @packages/ts/register --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json",
     "test-watch": "yarn test-unit --watch",
-    "watch": "webpack --watch --progress"
+    "watch": "node ../../scripts/run-webpack --watch --progress"
   },
   "dependencies": {
     "bluebird": "3.5.3",

packages/reporter/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "browser": "src/main.tsx",
   "scripts": {
-    "build-for-tests": "webpack",
+    "build-for-tests": "node ../../scripts/run-webpack",
     "clean-deps": "rimraf node_modules",
     "cypress:open": "node ../../scripts/cypress open --project .",
     "cypress:run": "node ../../scripts/cypress run --project .",

packages/runner-ct/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "browser": "src/index.js",
   "scripts": {
-    "build": "webpack",
+    "build": "node ../../scripts/run-webpack",
     "build-prod": "cross-env NODE_ENV=production yarn build && tsc",
     "clean-deps": "rimraf node_modules",
     "cypress:open": "ts-node ../../scripts/cypress.js open --component --project .",
     "cypress:run": "ts-node ../../scripts/cypress.js run --component --project .",
     "postinstall": "echo '@packages/runner needs: yarn build'",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json src",
     "test": "ts-node ../../scripts/cypress.js run --component --project .",
-    "watch": "webpack --watch --progress --config webpack.config.ts"
+    "watch": "node ../../scripts/run-webpack --watch --progress --config webpack.config.ts"
   },
   "dependencies": {},
   "devDependencies": {

packages/runner/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "browser": "src/index.js",
   "scripts": {
-    "build": "webpack",
+    "build": "node ../../scripts/run-webpack",
     "build-prod": "cross-env NODE_ENV=production yarn build",
     "clean-deps": "rimraf node_modules",
     "cypress:open": "node ../../scripts/cypress open",
@@ -14,7 +14,7 @@
     "test-debug": "yarn test-unit --inspect-brk=5566",
     "test-unit": "mocha --config test/.mocharc.json src/**/*.spec.* --exit",
     "test-watch": "yarn test-unit --watch",
-    "watch": "webpack --watch --progress"
+    "watch": "node ../../scripts/run-webpack --watch --progress"
   },
   "devDependencies": {
     "@cypress/react-tooltip": "0.5.3",

packages/ui-components/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "main": "src/index.tsx",
   "scripts": {
-    "build-for-tests": "webpack",
+    "build-for-tests": "node ../../scripts/run-webpack",
     "check-deps": "node ../../scripts/check-deps.js --verbose",
     "check-deps-pre": "npm run check-deps -- --prescript",
     "clean-deps": "rimraf node_modules",
@@ -39,6 +39,6 @@
     "react-dom": "16.8.6",
     "rimraf": "3.0.2",
     "webpack": "^4.44.2",
-    "webpack-cli": "3.3.11"
+    "webpack-cli": "3.3.2"
   }
 }

packages/web-config/package.json

@@ -39,7 +39,7 @@
     "sass-loader": "10.1.0",
     "sinon-chai": "3.3.0",
     "webpack": "^4.44.2",
-    "webpack-cli": "3.3.11",
+    "webpack-cli": "3.3.2",
     "webpack-livereload-plugin": "2.3.0"
   }
 }

scripts/gulp/tasks/gulpWebpack.ts

@@ -3,6 +3,9 @@ import pDefer from 'p-defer'
 import { monorepoPaths } from '../monorepoPaths'
 import { universalSpawn } from '../utils/childProcessUtils'
 import { addChildProcess } from './gulpRegistry'
+import semver from 'semver'
+
+type Env = typeof process.env
 
 export function webpackRunner () {
   return runWebpack({
@@ -16,10 +19,27 @@ type RunWebpackCfg = {
   cwd: string
   prefix: string
   args?: string[]
-  env?: object
+  env?: Env
   devServer?: boolean
 }
 
+// https://github.com/cypress-io/cypress/issues/18914
+// Node 17+ ships with OpenSSL 3 by default, so we may need the option
+// --openssl-legacy-provider so that webpack@4 can use the legacy MD4 hash
+// function. This option doesn't exist on Node <17 or when it is built
+// against OpenSSL 1, so we have to detect Node's major version and check
+// which version of OpenSSL it was built against before spawning the process.
+//
+// Can be removed once the webpack version is upgraded to >= 5.61,
+// which no longer relies on Node's builtin crypto.hash function.
+function useLegacyOpenSSLProvider (env: Env) {
+  if (process.versions && semver.satisfies(process.versions.node, '>=17.0.0') && semver.satisfies(process.versions.openssl, '>=3', { includePrerelease: true })) {
+    return { NODE_OPTIONS: `${env.NODE_OPTIONS ?? ''} --openssl-legacy-provider` }
+  }
+
+  return {}
+}
+
 export async function runWebpack (cfg: RunWebpackCfg) {
   const { cwd, args = [], env = process.env, devServer = false, prefix } = cfg
   const dfd = pDefer()
@@ -32,6 +52,7 @@ export async function runWebpack (cfg: RunWebpackCfg) {
       cwd,
       env: {
         ...(env || process.env),
+        ...useLegacyOpenSSLProvider(env),
         FORCE_COLOR: '1',
       },
     },

scripts/run-webpack.js

@@ -0,0 +1,23 @@
+const cp = require('child_process')
+const path = require('path')
+const semver = require('semver')
+
+const webpackCli = path.join(__dirname, '..', 'node_modules', 'webpack-cli', 'bin', 'cli.js')
+
+// https://github.com/cypress-io/cypress/issues/18914
+// Node 17+ ships with OpenSSL 3 by default, so we may need the option
+// --openssl-legacy-provider so that webpack@4 can use the legacy MD4 hash
+// function. This option doesn't exist on Node <17 or when it is built
+// against OpenSSL 1, so we have to detect Node's major version and check
+// which version of OpenSSL it was built against before spawning the process.
+//
+// Can be removed once the webpack version is upgraded to >= 5.61,
+// which no longer relies on Node's builtin crypto.hash function.
+
+let NODE_OPTIONS = process.env.NODE_OPTIONS || ''
+
+if (process.versions && semver.satisfies(process.versions.node, '>=17.0.0') && semver.satisfies(process.versions.openssl, '>=3', { includePrerelease: true })) {
+  NODE_OPTIONS = `${NODE_OPTIONS} --openssl-legacy-provider`
+}
+
+cp.execSync(`node ${webpackCli} ${process.argv.slice(2).join(' ')}`, { stdio: 'inherit', env: { ...process.env, NODE_OPTIONS } })

system-tests/lib/system-tests.ts

@@ -818,6 +818,7 @@ const systemTests = {
     const args = options.withBinary ? [
       `run`,
       `--project=${projectPath}`,
+      options.testingType === 'component' ? '--component' : '--e2e',
     ] : [
       require.resolve('@packages/server'),
       // hides a user warning to go through NPM module

system-tests/test-binary/node_versions_spec.ts

@@ -1,17 +1,30 @@
 import systemTests from '../lib/system-tests'
 
 function smokeTestDockerImage (dockerImage: string) {
-  systemTests.it(`can run in ${dockerImage}`, {
-    withBinary: true,
-    browser: 'electron',
-    dockerImage,
-    spec: 'test1.js',
-    specDir: 'tests',
-    project: 'todos',
+  context('e2e', () => {
+    systemTests.it(`can run in ${dockerImage}`, {
+      withBinary: true,
+      browser: 'electron',
+      dockerImage,
+      spec: 'test1.js',
+      specDir: 'tests',
+      project: 'todos',
+    })
+  })
+
+  context('component', () => {
+    systemTests.it(`can run in ${dockerImage}`, {
+      withBinary: true,
+      browser: 'electron',
+      dockerImage,
+      testingType: 'component',
+      project: 'simple-ct',
+      spec: 'src/simple_passing_component.cy.js',
+    })
   })
 }
 
-describe('e2e binary node versions', () => {
+describe('binary node versions', () => {
   [
     'cypress/base:12',
     'cypress/base:14',