@nx/cypress 17.2.0-beta.1 → 17.2.0-beta.3

package/migrations.json

@@ -52,11 +52,6 @@
       "version": "17.2.0-beta.0",
       "description": "Add devServerTargets into cypress.config.ts files for @nx/cypress/plugin",
       "implementation": "./src/migrations/update-17-2-0/add-dev-server-targets-to-cypress-configs"
-    },
-    "add-nx-cypress-plugin": {
-      "version": "17.2.0-beta.0",
-      "description": "Add the @nx/cypress/plugin to nx.json plugins",
-      "implementation": "./src/migrations/update-17-2-0/add-nx-cypress-plugin"
     }
   },
   "packageJsonUpdates": {
@@ -92,6 +87,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "17.2.0-beta.2": {
+      "version": "17.2.0-beta.2",
+      "packages": {
+        "vite": {
+          "version": "^5.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/cypress",
-  "version": "17.2.0-beta.1",
+  "version": "17.2.0-beta.3",
   "private": false,
   "description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
   "repository": {
@@ -34,14 +34,15 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "17.2.0-beta.1",
-    "@nx/eslint": "17.2.0-beta.1",
-    "@nx/js": "17.2.0-beta.1",
+    "@nx/devkit": "17.2.0-beta.3",
+    "@nx/eslint": "17.2.0-beta.3",
+    "@nx/js": "17.2.0-beta.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "detect-port": "^1.5.1",
+    "string-argv": "^0.3.2",
     "semver": "7.5.3",
     "tslib": "^2.3.0",
-    "@nrwl/cypress": "17.2.0-beta.1"
+    "@nrwl/cypress": "17.2.0-beta.3"
   },
   "peerDependencies": {
     "cypress": ">= 3 < 14"

package/plugins/cypress-preset.d.ts

@@ -40,7 +40,7 @@ export type NxCypressE2EPresetOptions = {
      * default is 'src'
      **/
     cypressDir?: string;
-    devServerTargets?: Record<string, string>;
-    ciDevServerTarget?: string;
+    webServerCommands?: Record<string, string>;
+    ciWebServerCommand?: string;
 };
 export {};

package/plugins/cypress-preset.js

@@ -5,8 +5,8 @@ const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const fs_1 = require("fs");
 const preprocessor_vite_1 = require("../src/plugins/preprocessor-vite");
-const ct_helpers_1 = require("../src/utils/ct-helpers");
-const start_dev_server_1 = require("../src/utils/start-dev-server");
+const string_argv_1 = require("string-argv");
+const child_process_1 = require("child_process");
 function nxBaseCypressPreset(pathToConfig, options) {
     // used to set babel settings for react CT.
     process.env.NX_CYPRESS_COMPONENT_TEST =
@@ -51,38 +51,45 @@ function nxE2EPreset(pathToConfig, options) {
         specPattern: `${basePath}/**/*.cy.{js,jsx,ts,tsx}`,
         fixturesFolder: `${basePath}/fixtures`,
         env: {
-            devServerTargets: options?.devServerTargets,
-            devServerTargetOptions: {},
-            ciDevServerTarget: options?.ciDevServerTarget,
+            webServerCommands: options?.webServerCommands,
+            ciWebServerCommand: options?.ciWebServerCommand,
         },
         async setupNodeEvents(on, config) {
             if (options?.bundler === 'vite') {
                 on('file:preprocessor', (0, preprocessor_vite_1.default)());
             }
-            if (!config.env.devServerTargets) {
+            if (!config.env.webServerCommands) {
                 return;
             }
-            const devServerTarget = config.env.devServerTarget ?? config.env.devServerTargets['default'];
-            if (!devServerTarget) {
+            const webServerCommand = config.env.webServerCommand ?? config.env.webServerCommands.default;
+            if (!webServerCommand) {
                 return;
             }
-            if (!config.baseUrl && devServerTarget) {
-                const graph = await (0, devkit_1.createProjectGraphAsync)();
-                const target = (0, devkit_1.parseTargetString)(devServerTarget, graph);
-                const context = (0, ct_helpers_1.createExecutorContext)(graph, graph.nodes[target.project].data?.targets, target.project, target.target, target.configuration);
-                const devServer = (0, start_dev_server_1.startDevServer)({
-                    devServerTarget,
-                    ...config.env.devServerTargetOptions,
-                }, context);
-                on('after:run', () => {
-                    devServer.return();
+            if (!config.baseUrl && webServerCommand) {
+                return new Promise((resolve) => {
+                    const [command, ...args] = (0, string_argv_1.default)(webServerCommand);
+                    const serverProcess = (0, child_process_1.spawn)(command, args, {
+                        stdio: ['inherit', 'inherit', 'inherit', 'ipc'],
+                        cwd: devkit_1.workspaceRoot,
+                        // Shell is required for windows but cannot be true on linux because it interferes with terminating the process
+                        shell: process.platform === 'win32',
+                        windowsHide: true,
+                    });
+                    serverProcess.on('message', (message) => {
+                        if (typeof message === 'object' &&
+                            'type' in message &&
+                            'baseUrl' in message &&
+                            message.type === 'server') {
+                            config.baseUrl = message.baseUrl;
+                            resolve(config);
+                        }
+                    });
+                    on('after:run', () => {
+                        serverProcess.kill('SIGTERM');
+                    });
                 });
-                const devServerValue = (await devServer.next()).value;
-                if (!devServerValue) {
-                    return;
-                }
-                return { ...config, baseUrl: devServerValue.baseUrl };
             }
+            return config;
         },
     };
     return baseConfig;

package/src/executors/cypress/cypress.impl.js

@@ -109,9 +109,6 @@ async function runCypress(baseUrl, opts) {
     if (opts.browser) {
         options.browser = opts.browser;
     }
-    options.env = {
-        devServerTarget: opts.devServerTarget,
-    };
     if (opts.env) {
         options.env = {
             ...options.env,

package/src/generators/configuration/configuration.js

@@ -95,28 +95,28 @@ async function addFiles(tree, options, projectGraph, hasPlugin) {
             jsx: options.jsx,
         });
         const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
-        let devServerTargets;
+        let webServerCommands;
         let ciDevServerTarget;
         if (hasPlugin && !options.baseUrl && options.devServerTarget) {
-            devServerTargets = {};
-            devServerTargets.default = options.devServerTarget;
+            webServerCommands = {};
+            webServerCommands.default = 'nx run ' + options.devServerTarget;
             const parsedTarget = (0, devkit_1.parseTargetString)(options.devServerTarget, projectGraph);
             const devServerProjectConfig = (0, devkit_1.readProjectConfiguration)(tree, parsedTarget.project);
             // Add production e2e target if serve target is found
             if (parsedTarget.configuration !== 'production' &&
                 devServerProjectConfig.targets[parsedTarget.target]?.configurations?.['production']) {
-                devServerTargets.production = `${parsedTarget.project}:${parsedTarget.target}:production`;
+                webServerCommands.production = `nx run ${parsedTarget.project}:${parsedTarget.target}:production`;
             }
             // Add ci/static e2e target if serve target is found
             if (devServerProjectConfig.targets?.['serve-static']) {
-                ciDevServerTarget = `${parsedTarget.project}:serve-static`;
+                ciDevServerTarget = `nx run ${parsedTarget.project}:serve-static`;
             }
         }
         const updatedCyConfig = await (0, config_1.addDefaultE2EConfig)(tree.read(cyFile, 'utf-8'), {
             cypressDir: options.directory,
             bundler: options.bundler === 'vite' ? 'vite' : undefined,
-            devServerTargets,
-            ciDevServerTarget: ciDevServerTarget,
+            webServerCommands,
+            ciWebServerCommand: ciDevServerTarget,
         }, options.baseUrl);
         tree.write(cyFile, updatedCyConfig);
     }

package/src/plugins/plugin.js

@@ -61,7 +61,7 @@ function getOutputs(projectRoot, cypressConfig, testingType) {
         }
     }
     const { screenshotsFolder, videosFolder, e2e, component } = cypressConfig;
-    const outputs = ['{options.videosFolder}', '{options.screenshotsFolder}'];
+    const outputs = [];
     if (videosFolder) {
         outputs.push(getOutput(videosFolder));
     }
@@ -92,50 +92,39 @@ function getOutputs(projectRoot, cypressConfig, testingType) {
 }
 function buildCypressTargets(configFilePath, projectRoot, options, context) {
     const cypressConfig = getCypressConfig(configFilePath, context);
-    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
-    const baseTargetConfig = {
-        executor: '@nx/cypress:cypress',
-        options: {
-            cypressConfig: configFilePath,
-        },
+    const cypressEnv = {
+        ...cypressConfig.env,
+        ...cypressConfig.e2e?.env,
     };
+    const devServerTargets = cypressEnv?.devServerTargets;
+    const relativeConfigPath = (0, path_1.relative)(projectRoot, configFilePath);
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
     const targets = {};
     if ('e2e' in cypressConfig) {
-        const e2eTargetDefaults = (0, project_configuration_utils_1.readTargetDefaultsForTarget)(options.targetName, context.nxJsonConfiguration.targetDefaults, '@nx/cypress:cypress');
         targets[options.targetName] = {
-            ...baseTargetConfig,
+            command: `cypress run --config-file ${relativeConfigPath} --e2e`,
             options: {
-                ...baseTargetConfig.options,
-                testingType: 'e2e',
+                cwd: projectRoot,
             },
         };
+        const e2eTargetDefaults = (0, project_configuration_utils_1.readTargetDefaultsForTarget)(options.targetName, context.nxJsonConfiguration.targetDefaults, 'run-commands');
         if (e2eTargetDefaults?.cache === undefined) {
             targets[options.targetName].cache = true;
         }
         if (e2eTargetDefaults?.inputs === undefined) {
-            targets[options.targetName].inputs =
-                'production' in namedInputs
-                    ? ['default', '^production']
-                    : ['default', '^default'];
+            targets[options.targetName].inputs = getInputs(namedInputs);
         }
         if (e2eTargetDefaults?.outputs === undefined) {
             targets[options.targetName].outputs = getOutputs(projectRoot, cypressConfig, 'e2e');
         }
-        const cypressEnv = {
-            ...cypressConfig.env,
-            ...cypressConfig.e2e?.env,
-        };
-        const devServerTargets = cypressEnv?.devServerTargets;
         if (devServerTargets?.default) {
-            targets[options.targetName].options.devServerTarget =
-                devServerTargets.default;
             delete devServerTargets.default;
         }
         if (Object.keys(devServerTargets ?? {}).length > 0) {
             targets[options.targetName].configurations ??= {};
             for (const [configuration, devServerTarget] of Object.entries(devServerTargets ?? {})) {
                 targets[options.targetName].configurations[configuration] = {
-                    devServerTarget,
+                    command: `cypress run --config-file ${relativeConfigPath} --e2e --env.webServerCommand "nx run ${devServerTarget}"`,
                 };
             }
         }
@@ -153,22 +142,15 @@ function buildCypressTargets(configFilePath, projectRoot, options, context) {
             const specFiles = (0, workspace_context_1.globWithWorkspaceContext)(context.workspaceRoot, specPatterns, excludeSpecPatterns);
             const dependsOn = [];
             const outputs = getOutputs(projectRoot, cypressConfig, 'e2e');
-            const inputs = 'production' in namedInputs
-                ? ['default', '^production']
-                : ['default', '^default'];
+            const inputs = getInputs(namedInputs);
             for (const file of specFiles) {
-                const targetName = options.ciTargetName + '--' + file;
+                const relativeSpecFilePath = (0, path_1.relative)(projectRoot, file);
+                const targetName = options.ciTargetName + '--' + relativeSpecFilePath;
                 targets[targetName] = {
-                    ...targets[options.targetName],
                     outputs,
                     inputs,
                     cache: true,
-                    configurations: undefined,
-                    options: {
-                        ...targets[options.targetName].options,
-                        devServerTarget: ciDevServerTarget,
-                        spec: file,
-                    },
+                    command: `cypress run --config-file ${relativeConfigPath} --e2e --env.webServerCommand "nx run ${ciDevServerTarget}" --spec ${relativeSpecFilePath}`,
                 };
                 dependsOn.push({
                     target: targetName,
@@ -190,10 +172,9 @@ function buildCypressTargets(configFilePath, projectRoot, options, context) {
         const componentTestingTargetDefaults = (0, project_configuration_utils_1.readTargetDefaultsForTarget)(options.componentTestingTargetName, context.nxJsonConfiguration.targetDefaults, '@nx/cypress:cypress');
         // This will not override the e2e target if it is the same
         targets[options.componentTestingTargetName] ??= {
-            ...baseTargetConfig,
+            command: `cypress open --config-file ${relativeConfigPath} --component`,
             options: {
-                ...baseTargetConfig.options,
-                testingType: 'component',
+                cwd: projectRoot,
             },
         };
         if (componentTestingTargetDefaults?.cache === undefined) {
@@ -201,9 +182,7 @@ function buildCypressTargets(configFilePath, projectRoot, options, context) {
         }
         if (componentTestingTargetDefaults?.inputs === undefined) {
             targets[options.componentTestingTargetName].inputs =
-                'production' in namedInputs
-                    ? ['default', '^production']
-                    : ['default', '^default'];
+                getInputs(namedInputs);
         }
         if (componentTestingTargetDefaults?.outputs === undefined) {
             targets[options.componentTestingTargetName].outputs = getOutputs(projectRoot, cypressConfig, 'component');
@@ -241,3 +220,13 @@ function normalizeOptions(options) {
     options.ciTargetName ??= 'e2e-ci';
     return options;
 }
+function getInputs(namedInputs) {
+    return [
+        ...('production' in namedInputs
+            ? ['default', '^production']
+            : ['default', '^default']),
+        {
+            externalDependencies: ['cypress'],
+        },
+    ];
+}

package/src/utils/versions.d.ts

@@ -5,5 +5,5 @@ export declare const cypressViteDevServerVersion = "^2.2.1";
 export declare const cypressVersion = "^13.0.0";
 export declare const cypressWebpackVersion = "^2.0.0";
 export declare const webpackHttpPluginVersion = "^5.5.0";
-export declare const viteVersion = "~4.3.9";
+export declare const viteVersion = "^5.0.0";
 export declare const htmlWebpackPluginVersion = "^5.5.0";

package/src/utils/versions.js

@@ -8,5 +8,5 @@ exports.cypressViteDevServerVersion = '^2.2.1';
 exports.cypressVersion = '^13.0.0';
 exports.cypressWebpackVersion = '^2.0.0';
 exports.webpackHttpPluginVersion = '^5.5.0';
-exports.viteVersion = '~4.3.9';
+exports.viteVersion = '^5.0.0';
 exports.htmlWebpackPluginVersion = '^5.5.0';

package/src/migrations/update-17-2-0/add-nx-cypress-plugin.d.ts

@@ -1,2 +0,0 @@
-import { Tree } from '@nx/devkit';
-export default function update(tree: Tree): Promise<void>;

package/src/migrations/update-17-2-0/add-nx-cypress-plugin.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const devkit_1 = require("@nx/devkit");
-const plugin_1 = require("../../plugins/plugin");
-const find_project_for_path_1 = require("nx/src/project-graph/utils/find-project-for-path");
-const replace_project_configuration_with_plugin_1 = require("@nx/devkit/src/utils/replace-project-configuration-with-plugin");
-async function update(tree) {
-    const proj = Object.fromEntries((0, devkit_1.getProjects)(tree).entries());
-    const rootMappings = (0, find_project_for_path_1.createProjectRootMappingsFromProjectConfigurations)(proj);
-    await (0, replace_project_configuration_with_plugin_1.replaceProjectConfigurationsWithPlugin)(tree, rootMappings, '@nx/cypress/plugin', plugin_1.createNodes, {
-        targetName: 'e2e',
-        componentTestingTargetName: 'component-test',
-    });
-    await (0, devkit_1.formatFiles)(tree);
-}
-exports.default = update;