misc: convert @cypress/webpack-dev-server tests to vitest. Additionally, uses tsx to import ESM only packages into @cypress/webpack-dev-server (#32878)

* chore: convert webpack-dev-server tests to vitest

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

* Update npm/webpack-dev-server/src/helpers/angularHandler.ts

Author: AtofStryker

guides/esm-migration.md

@@ -89,7 +89,7 @@ When migrating some of these projects away from the `ts-node` entry [see `@packa
 - [x] npm/puppeteer ✅ **COMPLETED** 
 - [x] npm/vite-dev-server ✅ **COMPLETED** 
 - [ ] npm/webpack-batteries-included-preprocessor
-- [ ] npm/webpack-dev-server
+- [x] npm/webpack-dev-server ✅ **COMPLETED** 
 - [ ] npm/webpack-preprocessor
 
 ##### Binary Packages

npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js

@@ -13,8 +13,8 @@
     "cypress:run-cypress-in-cypress": "cross-env CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1 HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York",
     "dev": "tsc --watch",
     "lint": "eslint --ext .js,.ts,.json, .",
-    "test": "yarn test-unit",
-    "test-unit": "mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js"
+    "test": "vitest run",
+    "test-debug": "vitest --inspect-brk --no-file-parallelism --test-timeout=0"
   },
   "dependencies": {
     "find-up": "6.3.0",
@@ -24,6 +24,7 @@
     "semver": "^7.7.1",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
+    "tsx": "^4.20.6",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^5.4.0"
@@ -32,13 +33,9 @@
     "@types/node": "22.18.7",
     "@types/speed-measure-webpack-plugin": "^1.3.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
-    "chai": "^4.3.6",
     "cross-env": "7.0.3",
     "dedent": "^0.7.0",
-    "mocha": "^9.2.2",
-    "sinon": "^13.0.1",
-    "snap-shot-it": "^7.9.10",
-    "ts-node": "^10.9.2",
+    "vitest": "^3.2.4",
     "webpack": "npm:webpack@^5"
   },
   "peerDependencies": {

npm/webpack-dev-server/package.json

@@ -3,7 +3,6 @@ import { tmpdir } from 'os'
 import * as path from 'path'
 import type { Configuration, RuleSetRule } from 'webpack'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
-import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
 import debugLib from 'debug'
 import type { logging as AngularLogging } from '@angular-devkit/core'
@@ -182,11 +181,17 @@ export async function getAngularCliModules (projectRoot: string) {
     { getCommonConfig },
     { getStylesConfig },
     { logging },
-  ] = await Promise.all(angularCLiModules.map((dep) => {
+  ] = await Promise.all(angularCLiModules.map(async (dep) => {
     try {
       const depPath = require.resolve(dep, { paths: [projectRoot] })
+      // NOTE: @cypress/webpack-dev-server is a CJS package, but we need to import some ESM files and absolute imports.
+      // since import statements in TypeScript will get transpiled down to CommonJS require statements, we want to use tsx to leverage
+      // an ESM style import here, which supports CommonJS and ESM.
+      const { tsImport } = require('tsx/esm/api')
 
-      return dynamicAbsoluteImport(depPath)
+      const module = await tsImport(depPath, __filename)
+
+      return module
     } catch (e) {
       throw new Error(`Could not resolve "${dep}". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?`)
     }
@@ -201,7 +206,12 @@ export async function getAngularCliModules (projectRoot: string) {
 }
 
 export async function getAngularJson (projectRoot: string): Promise<AngularJson> {
-  const { findUp } = await dynamicImport<typeof import('find-up')>('find-up')
+  // NOTE: @cypress/webpack-dev-server is a CJS package, but find-up +6.0.0 is an ESM only package.
+  // In order to dynamically import the find-up package, we need to use tsx to do so until @cypress/webpack-dev-server is an ESM-only package,
+  // which would be a breaking change to @cypress/webpack-dev-server and cypress.
+  const { tsImport } = require('tsx/esm/api')
+
+  const { findUp } = await tsImport('find-up', __filename) as typeof import('find-up')
 
   const angularJsonPath = await findUp('angular.json', { cwd: projectRoot })
 

npm/webpack-dev-server/src/dynamic-import.ts

@@ -6,7 +6,6 @@ import type { Configuration, EntryObject } from 'webpack'
 import { makeCypressWebpackConfig } from './makeDefaultWebpackConfig'
 import type { CreateFinalWebpackConfig } from './createWebpackDevServer'
 import { configFiles } from './constants'
-import { dynamicImport } from './dynamic-import'
 
 const debug = debugFn('cypress:webpack-dev-server:makeWebpackConfig')
 
@@ -61,9 +60,16 @@ function modifyWebpackConfigForCypress (webpackConfig: Partial<Configuration>) {
 }
 
 async function getWebpackConfigFromProjectRoot (projectRoot: string) {
-  const { findUp } = await dynamicImport<typeof import('find-up')>('find-up')
+  // NOTE: @cypress/webpack-dev-server is a CJS package, but find-up +6.0.0 is an ESM only package.
+  // In order to dynamically import the find-up package, we need to use tsx to do so until @cypress/webpack-dev-server is an ESM-only package,
+  // which would be a breaking change to @cypress/webpack-dev-server and cypress.
+  const { tsImport } = require('tsx/esm/api')
 
-  return await findUp(configFiles, { cwd: projectRoot })
+  const { findUp } = await tsImport('find-up', __filename) as typeof import('find-up')
+
+  const findUpResult = await findUp(configFiles, { cwd: projectRoot })
+
+  return findUpResult
 }
 
 /**

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`makeWebpackConfig > ignores userland webpack \`output.publicPath\` and \`devServer.overlay\` with webpack-dev-server v5 1`] = `
+{
+  "devServer": {
+    "client": {
+      "overlay": false,
+      "progress": false,
+    },
+    "port": undefined,
+  },
+  "devtool": "inline-source-map",
+  "mode": "development",
+  "optimization": {
+    "emitOnErrors": true,
+    "sideEffects": false,
+    "splitChunks": {
+      "chunks": "all",
+    },
+  },
+  "output": {
+    "filename": "[name].js",
+    "publicPath": "/test-public-path/",
+  },
+  "plugins": [
+    "HtmlWebpackPlugin",
+    "CypressCTWebpackPlugin",
+  ],
+}
+`;

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

@@ -1,12 +1,11 @@
+import { expect, it, describe, beforeEach, afterAll } from 'vitest'
 import path from 'path'
-import { expect } from 'chai'
 import { once, EventEmitter } from 'events'
 import http from 'http'
 import fs from 'fs-extra'
 
 import { devServer } from '..'
 import { restoreLoadHook } from '../src/helpers/sourceRelativeWebpackModules'
-import './support'
 import type { ConfigHandler } from '../src/devServer'
 
 const requestSpecFile = (file: string, port: number) => {
@@ -15,7 +14,7 @@ const requestSpecFile = (file: string, port: number) => {
       host: '127.0.0.1',
       port,
       path: encodeURI(file),
-    }
+    } as http.RequestOptions
 
     const callback = (response: EventEmitter) => {
       let str = ''
@@ -29,7 +28,11 @@ const requestSpecFile = (file: string, port: number) => {
       })
     }
 
-    http.request(opts, callback).end()
+    // give webpack a little time (200ms) to compile before sending the request so the spec is available in the file system.
+    // alternative would be to listen to a compile event or check stdout to see if webpack compiled successfully
+    setTimeout(() => {
+      http.request(opts, callback).end()
+    }, 200)
   })
 }
 
@@ -71,13 +74,13 @@ const cypressConfig = {
   indexHtmlFile: 'test/component-index.html',
 } as any as Cypress.PluginConfigOptions
 
-describe('#devServer', () => {
+describe('#devServer', { timeout: 5000 }, () => {
   beforeEach(() => {
     delete require.cache
     restoreLoadHook()
   })
 
-  after(() => {
+  afterAll(() => {
     restoreLoadHook()
   })
 
@@ -91,7 +94,7 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/foo.spec.js', port as number)
 
-    expect(response).to.eq('const foo = () => {}\n')
+    expect(response).toEqual('const foo = () => {}\n')
 
     await closeServer(close)
   })
@@ -106,9 +109,9 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/[foo]/bar.spec.js', port as number)
 
-    expect(response).to.eq(`it('this is a spec with a path containing []', () => {})\n`)
+    expect(response).toEqual(`it('this is a spec with a path containing []', () => {})\n`)
 
-    return closeServer(close)
+    await closeServer(close)
   })
 
   it('serves specs in directory with non English chars via a webpack dev server', async () => {
@@ -121,9 +124,9 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/サイプレス.spec.js', port as number)
 
-    expect(response).to.eq(`it('サイプレス', () => {})\n`)
+    expect(response).toEqual(`it('サイプレス', () => {})\n`)
 
-    return closeServer(close)
+    await closeServer(close)
   })
 
   it('serves specs in directory with ... in the file name via a webpack dev server', async () => {
@@ -136,9 +139,9 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/[...bar].spec.js', port as number)
 
-    expect(response).to.eq(`it('...bar', () => {})\n`)
+    expect(response).toEqual(`it('...bar', () => {})\n`)
 
-    return closeServer(close)
+    await closeServer(close)
   })
 
   it('serves a file with spaces via a webpack dev server', async () => {
@@ -151,9 +154,9 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/foo bar.spec.js', port as number)
 
-    expect(response).to.eq(`it('this is a spec with a path containing a space', () => {})\n`)
+    expect(response).toEqual(`it('this is a spec with a path containing a space', () => {})\n`)
 
-    return closeServer(close)
+    await closeServer(close)
   })
 
   it('emits dev-server:compile:success event on successful compilation', async () => {
@@ -197,7 +200,7 @@ describe('#devServer', () => {
     await once(devServerEvents, 'dev-server:compile:success')
     const updatedmtime = fs.statSync(cypressConfig.indexHtmlFile).mtimeMs
 
-    expect(oldmtime).to.not.equal(updatedmtime)
+    expect(oldmtime).not.toEqual(updatedmtime)
 
     await closeServer(close)
   })
@@ -242,9 +245,9 @@ describe('#devServer', () => {
         const updated = await requestSpecFile('/__cypress/src/spec-0.js', port)
 
         if (updateExpected) {
-          expect(original, message).not.to.equal(updated)
+          expect(original, message).not.toEqual(updated)
         } else {
-          expect(original, message).to.equal(updated)
+          expect(original, message).toEqual(updated)
         }
 
         await closeServer(close)
@@ -267,9 +270,8 @@ describe('#devServer', () => {
 
     const response = await requestSpecFile('/test/fixtures/foo.spec.js', port as number)
 
-    expect(response).to.eq('const foo = () => {}\n')
+    expect(response).toEqual('const foo = () => {}\n')
 
     await closeServer(close)
   })
 })
-.timeout(5000)