Unit test

.github/workflows/main.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Typecheck
+        run: pnpm check-ts
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Test
+        run: pnpm run test

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+}

dist/CypressCTRspackPlugin.js

@@ -6,13 +6,13 @@ const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const fs_extra_1 = tslib_1.__importDefault(require("fs-extra"));
 const path_1 = tslib_1.__importDefault(require("path"));
 const debug_1 = tslib_1.__importDefault(require("debug"));
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:rspackPlugin');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:rspackPlugin');
 const normalizeError = (error) => {
     return typeof error === 'string' ? error : error.message;
 };
 exports.normalizeError = normalizeError;
 /**
- * A rspack 4/5 compatible Cypress Component Testing Plugin
+ * A rspack compatible Cypress Component Testing Plugin
  *
  * @internal
  */
@@ -68,16 +68,14 @@ class CypressCTRspackPlugin {
             this.files = specs;
             const inputFileSystem = this.compilation.inputFileSystem;
             // TODO: don't use a sync fs method here
-            // eslint-disable-next-line no-restricted-syntax
             const utimesSync = (_a = inputFileSystem.fileSystem.utimesSync) !== null && _a !== void 0 ? _a : fs_extra_1.default.utimesSync;
             utimesSync(path_1.default.join(this.projectRoot, this.indexHtmlFile), new Date(), new Date());
         };
         /**
          * The rspack compiler generates a new `compilation` each time it compiles, so
          * we have to apply hooks to it fresh each time
          *
-         * @param compilation rspack 4 `compilation.Compilation`, rspack 5
-         *   `Compilation`
+         * @param compilation `RspackCompilation`
          */
         this.addCompilationHooks = (compilation) => {
             this.compilation = compilation;

dist/constants.js

@@ -6,4 +6,8 @@ exports.configFiles = [
     'rspack.config.js',
     'rspack.config.mjs',
     'rspack.config.cjs',
+    'webpack.config.ts',
+    'webpack.config.js',
+    'webpack.config.mjs',
+    'webpack.config.cjs',
 ];

dist/createRspackDevServer.js

@@ -4,28 +4,21 @@ exports.createRspackDevServer = void 0;
 const tslib_1 = require("tslib");
 const debug_1 = tslib_1.__importDefault(require("debug"));
 const makeRspackConfig_1 = require("./makeRspackConfig");
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:start');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:start');
 async function createRspackDevServer(config) {
     var _a;
-    const { sourceRspackModulesResult: { rspack: { module: rspack }, rspackDevServer: { majorVersion: rspackDevServerMajorVersion }, }, } = config;
+    const { sourceRspackModulesResult: { rspack: { module: rspack }, }, devServerConfig: { cypressConfig: { devServerPublicPathRoute }, }, } = config;
     const finalRspackConfig = await (0, makeRspackConfig_1.makeRspackConfig)(config);
-    const rspackCompiler = rspack(finalRspackConfig, undefined);
-    const { devServerConfig: { cypressConfig: { devServerPublicPathRoute }, }, } = config;
+    const rspackCompiler = rspack(finalRspackConfig);
     const isOpenMode = !config.devServerConfig.cypressConfig.isTextTerminal;
     const RspackDevServer = config.sourceRspackModulesResult.rspackDevServer.module;
-    const rspackDevServerConfig = Object.assign(Object.assign({ host: '127.0.0.1', port: 'auto' }, finalRspackConfig === null || finalRspackConfig === void 0 ? void 0 : finalRspackConfig.devServer), { devMiddleware: {
+    const rspackDevServerConfig = Object.assign(Object.assign({ host: '127.0.0.1', port: 'auto' }, finalRspackConfig.devServer), { devMiddleware: {
             publicPath: devServerPublicPathRoute,
             stats: (_a = finalRspackConfig.stats) !== null && _a !== void 0 ? _a : 'minimal',
         }, hot: false, 
         // Only enable file watching & reload when executing tests in `open` mode
-        liveReload: isOpenMode, client: {
-            overlay: false,
-        } });
+        liveReload: isOpenMode, client: { overlay: false } });
     const server = new RspackDevServer(rspackDevServerConfig, rspackCompiler);
-    return {
-        server,
-        compiler: rspackCompiler,
-    };
-    throw new Error(`Unsupported rspackDevServer version ${rspackDevServerMajorVersion}`);
+    return { server, compiler: rspackCompiler };
 }
 exports.createRspackDevServer = createRspackDevServer;

dist/devServer.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="cypress" />
 /// <reference types="cypress" />
 /// <reference types="node" />
+import type { RspackDevServer } from '@rspack/dev-server';
 import type { Configuration } from '@rspack/core';
 import { SourceRelativeRspackResult } from './helpers/sourceRelativeRspackModules';
-import type { RspackDevServer } from '@rspack/dev-server';
 export type Frameworks = Extract<Cypress.DevServerConfigOptions, {
     bundler: 'webpack';
 }>['framework'];
@@ -36,7 +36,6 @@ export declare namespace devServer {
     var create: (devServerConfig: DevServerConfig) => Promise<{
         server: RspackDevServer;
         compiler: any;
-        version: 0;
     }>;
 }
 export type PresetHandlerResult = {

dist/devServer.js

@@ -1,12 +1,12 @@
 "use strict";
-/// <reference types="cypress" />
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isThirdPartyDefinition = exports.devServer = void 0;
 const tslib_1 = require("tslib");
-const createRspackDevServer_1 = require("./createRspackDevServer");
+/// <reference types="cypress" />
 const debug_1 = tslib_1.__importDefault(require("debug"));
+const createRspackDevServer_1 = require("./createRspackDevServer");
 const sourceRelativeRspackModules_1 = require("./helpers/sourceRelativeRspackModules");
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:devServer');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:devServer');
 /**
  * import { RspackDevServer } from '@rspack/dev-server'
  *
@@ -24,7 +24,7 @@ function devServer(devServerConfig) {
             if (!result.server.options.port) {
                 return reject(new Error(`Expected port ${result.server.options.port} to be a number`));
             }
-            debug('Component testing rspack server 4 started on port %s', result.server.options.port);
+            debug('Component testing rspack server started on port %s', result.server.options.port);
             resolve({
                 port: result.server.options.port,
                 // Close is for unit testing only. We kill this child process which will handle the closing of the server
@@ -96,11 +96,6 @@ devServer.create = async function (devServerConfig) {
         frameworkConfig,
         sourceRspackModulesResult,
     });
-    const result = {
-        server,
-        compiler,
-        version: sourceRspackModulesResult.rspackDevServer.majorVersion,
-    };
-    return result;
+    return { server, compiler };
 };
 exports.default = devServer;

dist/helpers/sourceRelativeRspackModules.d.ts

@@ -19,13 +19,11 @@ export interface SourcedDependency {
 }
 export interface SourcedRspack extends SourcedDependency {
     module: Function;
-    majorVersion: 0;
 }
 export interface SourcedRspackDevServer extends SourcedDependency {
     module: {
         new (...args: unknown[]): RspackDevServer;
     };
-    majorVersion: 0;
 }
 export interface SourceRelativeRspackResult {
     framework: SourcedDependency | null;
@@ -37,5 +35,4 @@ export declare function sourceFramework(config: DevServerConfig): SourcedDepende
 export declare function sourceRspack(config: DevServerConfig, framework: SourcedDependency | null): SourcedRspack;
 export declare function sourceRspackDevServer(config: DevServerConfig, framework?: SourcedDependency | null): SourcedRspackDevServer;
 export declare function sourceDefaultRspackDependencies(config: DevServerConfig): SourceRelativeRspackResult;
-export declare function getMajorVersion<T extends number>(json: PackageJson, acceptedVersions: T[]): T;
 export declare function restoreLoadHook(): void;

dist/helpers/sourceRelativeRspackModules.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.restoreLoadHook = exports.getMajorVersion = exports.sourceDefaultRspackDependencies = exports.sourceRspackDevServer = exports.sourceRspack = exports.sourceFramework = exports.cypressRspackPath = void 0;
+exports.restoreLoadHook = exports.sourceDefaultRspackDependencies = exports.sourceRspackDevServer = exports.sourceRspack = exports.sourceFramework = exports.cypressRspackPath = void 0;
 const tslib_1 = require("tslib");
 const module_1 = tslib_1.__importDefault(require("module"));
 const path_1 = tslib_1.__importDefault(require("path"));
 const debug_1 = tslib_1.__importDefault(require("debug"));
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:sourceRelativeRspackModules');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:sourceRelativeRspackModules');
 const originalModuleLoad = module_1.default._load;
 const originalModuleResolveFilename = module_1.default._resolveFilename;
 const cypressRspackPath = (config) => {
@@ -18,7 +18,7 @@ const frameworkRspackMapper = {
     'create-react-app': 'react-scripts',
     'vue-cli': '@vue/cli-service',
     nuxt: '@nuxt/rspack',
-    react: undefined,
+    react: 'react',
     vue: undefined,
     next: 'next',
     angular: '@angular-devkit/build-angular',
@@ -59,7 +59,6 @@ function sourceFramework(config) {
 exports.sourceFramework = sourceFramework;
 // Source the rspack module from the provided framework or projectRoot. We override the module resolution
 // so that other packages that import rspack resolve to the version we found.
-// If none is found, we fallback to the bundled version in '@cypress/rspack-batteries-included-preprocessor'.
 function sourceRspack(config, framework) {
     var _a;
     const searchRoot = (_a = framework === null || framework === void 0 ? void 0 : framework.importPath) !== null && _a !== void 0 ? _a : config.cypressConfig.projectRoot;
@@ -84,7 +83,6 @@ function sourceRspack(config, framework) {
     rspack.importPath = path_1.default.dirname(rspackJsonPath);
     rspack.packageJson = require(rspackJsonPath);
     rspack.module = require(rspack.importPath).rspack;
-    rspack.majorVersion = getMajorVersion(rspack.packageJson, [0]);
     debug('Rspack: Successfully sourced rspack - %o', rspack);
     module_1.default._load = function (request, parent, isMain) {
         if (request === 'rspack' || request.startsWith('rspack/')) {
@@ -109,12 +107,12 @@ function sourceRspack(config, framework) {
     return rspack;
 }
 exports.sourceRspack = sourceRspack;
-// Source the rspack-dev-server module from the provided framework or projectRoot.
+// Source the @rspack/dev-server module from the provided framework or projectRoot.
 // If none is found, we fallback to the version bundled with this package.
 function sourceRspackDevServer(config, framework) {
     var _a;
     const searchRoot = (_a = framework === null || framework === void 0 ? void 0 : framework.importPath) !== null && _a !== void 0 ? _a : config.cypressConfig.projectRoot;
-    debug('RspackDevServer: Attempting to source rspack-dev-server from %s', searchRoot);
+    debug('RspackDevServer: Attempting to source @rspack/dev-server from %s', searchRoot);
     const rspackDevServer = {};
     let rspackDevServerJsonPath;
     try {
@@ -135,8 +133,7 @@ function sourceRspackDevServer(config, framework) {
     rspackDevServer.importPath = path_1.default.dirname(rspackDevServerJsonPath);
     rspackDevServer.packageJson = require(rspackDevServerJsonPath);
     rspackDevServer.module = require(rspackDevServer.importPath).RspackDevServer;
-    rspackDevServer.majorVersion = getMajorVersion(rspackDevServer.packageJson, [0]);
-    debug('RspackDevServer: Successfully sourced rspack-dev-server - %o', rspackDevServer);
+    debug('RspackDevServer: Successfully sourced @rspack/dev-server - %o', rspackDevServer);
     return rspackDevServer;
 }
 exports.sourceRspackDevServer = sourceRspackDevServer;
@@ -148,15 +145,18 @@ function sourceDefaultRspackDependencies(config) {
     return { framework, rspack, rspackDevServer };
 }
 exports.sourceDefaultRspackDependencies = sourceDefaultRspackDependencies;
-function getMajorVersion(json, acceptedVersions) {
-    const major = Number(json.version.split('.')[0]);
-    if (!acceptedVersions.includes(major)) {
-        throw new Error(`Unexpected major version of ${json.name}. ` +
-            `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join(', ')} - saw ${json.version}`);
-    }
-    return Number(major);
-}
-exports.getMajorVersion = getMajorVersion;
+// export function getMajorVersion<T extends number>(json: PackageJson, acceptedVersions: T[]): T {
+//   const major = Number(json.version.split('.')[0])
+//   if (!acceptedVersions.includes(major as T)) {
+//     throw new Error(
+//       `Unexpected major version of ${json.name}. ` +
+//         `Cypress-rspack-dev-server works with ${json.name} versions ${acceptedVersions.join(
+//           ', ',
+//         )} - saw ${json.version}`,
+//     )
+//   }
+//   return Number(major) as T
+// }
 function restoreLoadHook() {
     ;
     module_1.default._load = originalModuleLoad;

dist/loader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const debug_1 = tslib_1.__importDefault(require("debug"));
 const path = tslib_1.__importStar(require("path"));
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:rspack');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:rspack');
 /**
  * @param {ComponentSpec} file spec to create import string from.
  * @param {string} filename name of the spec file - this is the same as file.name

dist/makeDefaultRspackConfig.js

@@ -6,12 +6,12 @@ const path_1 = tslib_1.__importDefault(require("path"));
 const debug_1 = tslib_1.__importDefault(require("debug"));
 const core_1 = require("@rspack/core");
 const CypressCTRspackPlugin_1 = require("./CypressCTRspackPlugin");
-const debug = (0, debug_1.default)('cypress:rspack-dev-server:makeDefaultRspackConfig');
+const debug = (0, debug_1.default)('cypress-rspack-dev-server:makeDefaultRspackConfig');
 const OUTPUT_PATH = path_1.default.join(__dirname, 'dist');
 const OsSeparatorRE = RegExp(`\\${path_1.default.sep}`, 'g');
 const posixSeparator = '/';
 function makeCypressRspackConfig(config) {
-    const { devServerConfig: { cypressConfig: { projectRoot, devServerPublicPathRoute, supportFile, indexHtmlFile, isTextTerminal: isRunMode, }, specs: files, devServerEvents, framework, }, sourceRspackModulesResult: { rspack: { module: rspack }, }, } = config;
+    const { devServerConfig: { cypressConfig: { projectRoot, devServerPublicPathRoute, supportFile, indexHtmlFile, isTextTerminal: isRunMode, }, specs: files, devServerEvents, }, sourceRspackModulesResult: { rspack: { module: rspack }, }, } = config;
     const optimization = {
         // To prevent files from being tree shaken by rspack, we set optimization.sideEffects: false ensuring that
         // rspack does not recognize the sideEffects flag in the package.json and thus files are not unintentionally
@@ -52,11 +52,8 @@ function makeCypressRspackConfig(config) {
     };
     if (isRunMode) {
         // Disable file watching when executing tests in `run` mode
-        finalConfig.watchOptions = {
-            ignored: '**/*',
-        };
+        finalConfig.watchOptions = { ignored: '**/*' };
     }
-    // @ts-ignore
-    return Object.assign({}, finalConfig);
+    return finalConfig;
 }
 exports.makeCypressRspackConfig = makeCypressRspackConfig;

dist/makeRspackConfig.js

@@ -9,7 +9,7 @@ const local_pkg_1 = require("local-pkg");
 const makeDefaultRspackConfig_1 = require("./makeDefaultRspackConfig");
 const constants_1 = require("./constants");
 const dynamic_import_1 = require("./dynamic-import");
-const debug = (0, debug_1.debug)('cypress:rspack-dev-server:makeRspackConfig');
+const debug = (0, debug_1.debug)('cypress-rspack-dev-server:makeRspackConfig');
 const removeList = [
     // We provide a webpack-html-plugin config pinned to a specific version (4.x)
     // that we have tested and are confident works with all common configurations.

package.json

@@ -4,15 +4,16 @@
   "description": "Launches Rspack Dev Server for Component Testing",
   "main": "dist/index.js",
   "scripts": {
-    "build": "pnpm tsc --skipLibCheck || echo 'built, with type errors'",
+    "build": "pnpm tsc || echo 'built, with type errors'",
     "build-prod": "pnpm build",
-    "check-ts": "tsc --noEmit",
+    "check-ts": "pnpm tsc --noEmit",
     "dev": "DEBUG=cypress:rspack-dev-server:* tsc --watch",
     "clean": "rimraf dist",
     "cypress:run": "pnpm cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
     "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",
     "cypress:open": "pnpm cypress:run-cypress-in-cypress gulp open --project .",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "jest"
   },
   "dependencies": {
     "@rspack/cli": "^0.3.14",
@@ -22,24 +23,30 @@
     "webpack-merge": "^5.10.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@jest/globals": "^29.7.0",
     "@rspack/core": "^0.3.14",
     "@rspack/dev-server": "^0.3.14",
     "@types/debug": "^4.1.12",
     "@types/fs-extra": "^11.0.1",
+    "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.201",
     "@types/proxyquire": "^1.3.28",
-    "@typescript-eslint/parser": "^6.11.0",
     "@types/watchpack": "^2.4.4",
     "@types/webpack-sources": "^3.2.3",
+    "@typescript-eslint/parser": "^6.11.0",
+    "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
     "cypress": "^12.13.0",
     "debug": "^4.3.4",
     "dedent": "^0.7.0",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "fs-extra": "9.1.0",
+    "jest": "^29.7.0",
     "lodash": "^4.17.21",
-    "mocha": "^9.2.2",
     "path": "^0.12.7",
     "prettier": "^3.1.0",
     "proxyquire": "2.1.3",