@nx/cypress 0.0.0-pr-22179-271588f

package/src/generators/component-configuration/component-configuration.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTsConfigForComponentTesting = exports.componentConfigurationGeneratorInternal = exports.componentConfigurationGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const cypress_version_1 = require("../../utils/cypress-version");
+const versions_1 = require("../../utils/versions");
+const base_setup_1 = require("../base-setup/base-setup");
+const init_1 = require("../init/init");
+function componentConfigurationGenerator(tree, options) {
+    return componentConfigurationGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.componentConfigurationGenerator = componentConfigurationGenerator;
+async function componentConfigurationGeneratorInternal(tree, options) {
+    const tasks = [];
+    const opts = normalizeOptions(tree, options);
+    tasks.push(await (0, init_1.default)(tree, {
+        ...opts,
+        skipFormat: true,
+    }));
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/cypress/plugin'
+        : p.plugin === '@nx/cypress/plugin');
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, opts.project);
+    tasks.push(updateDeps(tree, opts));
+    addProjectFiles(tree, projectConfig, opts);
+    if (!hasPlugin || opts.addExplicitTargets) {
+        addTargetToProject(tree, projectConfig, opts);
+    }
+    updateNxJsonConfiguration(tree, hasPlugin);
+    updateTsConfigForComponentTesting(tree, projectConfig);
+    if (!opts.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.componentConfigurationGeneratorInternal = componentConfigurationGeneratorInternal;
+function normalizeOptions(tree, options) {
+    const cyVersion = (0, cypress_version_1.installedCypressVersion)();
+    if (cyVersion && cyVersion < 10) {
+        throw new Error('Cypress version of 10 or higher is required to use component testing. See the migration guide to upgrade. https://nx.dev/cypress/v11-migration-guide');
+    }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    return {
+        addPlugin,
+        ...options,
+        framework: options.framework ?? null,
+        directory: options.directory ?? 'cypress',
+    };
+}
+function updateDeps(tree, opts) {
+    const devDeps = {
+        cypress: versions_1.cypressVersion,
+    };
+    if (opts.bundler === 'vite') {
+        devDeps['@cypress/vite-dev-server'] = versions_1.cypressViteDevServerVersion;
+    }
+    else {
+        devDeps['@cypress/webpack-dev-server'] = versions_1.cypressWebpackVersion;
+        devDeps['html-webpack-plugin'] = versions_1.htmlWebpackPluginVersion;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDeps);
+}
+function addProjectFiles(tree, projectConfig, opts) {
+    (0, base_setup_1.addBaseCypressSetup)(tree, {
+        project: opts.project,
+        directory: opts.directory,
+        jsx: opts.jsx,
+    });
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), projectConfig.root, {
+        ...opts,
+        projectRoot: projectConfig.root,
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(projectConfig.root),
+        ext: '',
+    });
+}
+function addTargetToProject(tree, projectConfig, opts) {
+    projectConfig.targets['component-test'] = {
+        executor: '@nx/cypress:cypress',
+        options: {
+            cypressConfig: (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts'),
+            testingType: 'component',
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(tree, opts.project, projectConfig);
+}
+function updateNxJsonConfiguration(tree, hasPlugin) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const productionFileSet = nxJson.namedInputs?.production;
+    if (productionFileSet) {
+        nxJson.namedInputs.production = Array.from(new Set([
+            ...productionFileSet,
+            '!{projectRoot}/cypress/**/*',
+            '!{projectRoot}/**/*.cy.[jt]s?(x)',
+            '!{projectRoot}/cypress.config.[jt]s',
+        ]));
+    }
+    if (!hasPlugin) {
+        const cacheableOperations = nxJson.tasksRunnerOptions?.default?.options?.cacheableOperations;
+        if (cacheableOperations &&
+            !cacheableOperations.includes('component-test')) {
+            cacheableOperations.push('component-test');
+        }
+        nxJson.targetDefaults ??= {};
+        nxJson.targetDefaults['component-test'] ??= {};
+        nxJson.targetDefaults['component-test'].cache ??= true;
+        nxJson.targetDefaults['component-test'] ??= {};
+        nxJson.targetDefaults['component-test'].inputs ??= [
+            'default',
+            productionFileSet ? '^production' : '^default',
+        ];
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+function updateTsConfigForComponentTesting(tree, projectConfig) {
+    const tsConfigPath = (0, devkit_1.joinPathFragments)(projectConfig.root, projectConfig.projectType === 'library'
+        ? 'tsconfig.lib.json'
+        : 'tsconfig.app.json');
+    if (tree.exists(tsConfigPath)) {
+        (0, devkit_1.updateJson)(tree, tsConfigPath, (json) => {
+            const excluded = new Set([
+                ...(json.exclude || []),
+                'cypress/**/*',
+                'cypress.config.ts',
+                '**/*.cy.ts',
+                '**/*.cy.js',
+                '**/*.cy.tsx',
+                '**/*.cy.jsx',
+            ]);
+            json.exclude = Array.from(excluded);
+            return json;
+        });
+    }
+    const projectBaseTsConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json');
+    if (tree.exists(projectBaseTsConfig)) {
+        (0, devkit_1.updateJson)(tree, projectBaseTsConfig, (json) => {
+            if (json.references) {
+                const hasCyTsConfig = json.references.some((r) => r.path.includes('./cypress/tsconfig.json'));
+                if (!hasCyTsConfig) {
+                    json.references.push({ path: './cypress/tsconfig.json' });
+                }
+            }
+            else {
+                const excluded = new Set([
+                    ...(json.exclude || []),
+                    'cypress/**/*',
+                    'cypress.config.ts',
+                    '**/*.cy.ts',
+                    '**/*.cy.js',
+                    '**/*.cy.tsx',
+                    '**/*.cy.jsx',
+                ]);
+                json.exclude = Array.from(excluded);
+            }
+            return json;
+        });
+    }
+}
+exports.updateTsConfigForComponentTesting = updateTsConfigForComponentTesting;
+exports.default = componentConfigurationGenerator;

package/src/generators/component-configuration/files/__directory__/support/component-index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%= project %> Components App</title>
+  <% if(framework === 'next') { %>
+  <!-- Used by Next.js to inject CSS. -->
+  <div id="__next_css__DO_NOT_USE__"></div>
+  <% } %>
+</head>
+<body>
+  <div data-cy-root></div>
+</body>
+</html>

package/src/generators/component-configuration/files/__directory__/support/component.ts__ext__

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';
+
+// add component testing only related command here, such as mount
+declare global {
+// eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+    }
+  }
+}

package/src/generators/component-configuration/schema.d.ts

@@ -0,0 +1,14 @@
+export interface CypressComponentConfigurationSchema {
+  project: string;
+  skipFormat: boolean;
+  directory?: string;
+  bundler?: 'webpack' | 'vite';
+  jsx?: boolean;
+  addPlugin?: boolean;
+
+  /**
+   * @internal
+   */
+  addExplicitTargets?: boolean;
+  framework?: 'next';
+}

package/src/generators/component-configuration/schema.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxCypressComponentConfiguration",
+  "cli": "nx",
+  "title": "Set up Cypress component testing for a project",
+  "description": "Set up Cypress component test for a project.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nx/cypress:component-configuration --project=my-cool-lib ",
+      "description": "Add cypress component testing to an existing project named my-cool-lib"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add cypress component testing to",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-prompt": "What project should we add Cypress component testing to?"
+    },
+    "bundler": {
+      "description": "The Cypress bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which Cypress bundler do you want to use for the dev-server?",
+      "default": "webpack"
+    },
+    "directory": {
+      "type": "string",
+      "description": "A directory where the project is placed relative from the project root",
+      "default": "cypress"
+    },
+    "jsx": {
+      "description": "Whether or not this project uses JSX.",
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "required": ["project"],
+  "examplesFile": "../../../docs/cypress-component-configuration-examples.md"
+}

package/src/generators/configuration/configuration.d.ts

@@ -0,0 +1,23 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { Linter } from '@nx/eslint';
+export interface CypressE2EConfigSchema {
+    project: string;
+    baseUrl?: string;
+    directory?: string;
+    js?: boolean;
+    skipFormat?: boolean;
+    setParserOptionsProject?: boolean;
+    skipPackageJson?: boolean;
+    bundler?: 'webpack' | 'vite' | 'none';
+    devServerTarget?: string;
+    linter?: Linter;
+    port?: number | 'cypress-auto';
+    jsx?: boolean;
+    rootProject?: boolean;
+    webServerCommands?: Record<string, string>;
+    ciWebServerCommand?: string;
+    addPlugin?: boolean;
+}
+export declare function configurationGenerator(tree: Tree, options: CypressE2EConfigSchema): Promise<GeneratorCallback>;
+export declare function configurationGeneratorInternal(tree: Tree, options: CypressE2EConfigSchema): Promise<GeneratorCallback>;
+export default configurationGenerator;

package/src/generators/configuration/configuration.js

@@ -0,0 +1,220 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configurationGeneratorInternal = exports.configurationGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const eslint_1 = require("@nx/eslint");
+const path_1 = require("path");
+const add_linter_1 = require("../../utils/add-linter");
+const config_1 = require("../../utils/config");
+const cypress_version_1 = require("../../utils/cypress-version");
+const versions_1 = require("../../utils/versions");
+const init_1 = require("../init/init");
+const base_setup_1 = require("../base-setup/base-setup");
+function configurationGenerator(tree, options) {
+    return configurationGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.configurationGenerator = configurationGenerator;
+async function configurationGeneratorInternal(tree, options) {
+    const opts = normalizeOptions(tree, options);
+    opts.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const tasks = [];
+    if (!(0, cypress_version_1.installedCypressVersion)()) {
+        tasks.push(await (0, js_1.initGenerator)(tree, { ...options, skipFormat: true }));
+        tasks.push(await (0, init_1.default)(tree, {
+            ...opts,
+            skipFormat: true,
+        }));
+    }
+    else if (opts.addPlugin) {
+        (0, init_1.addPlugin)(tree);
+    }
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/cypress/plugin'
+        : p.plugin === '@nx/cypress/plugin');
+    await addFiles(tree, opts, projectGraph, hasPlugin);
+    if (!hasPlugin) {
+        addTarget(tree, opts);
+    }
+    const linterTask = await (0, add_linter_1.addLinterToCyProject)(tree, {
+        ...opts,
+        cypressDir: opts.directory,
+    });
+    tasks.push(linterTask);
+    if (!opts.skipPackageJson) {
+        tasks.push(ensureDependencies(tree, opts));
+    }
+    if (!opts.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.configurationGeneratorInternal = configurationGeneratorInternal;
+function ensureDependencies(tree, options) {
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+    };
+    if (options.bundler === 'vite') {
+        devDependencies['vite'] = versions_1.viteVersion;
+    }
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
+}
+function normalizeOptions(tree, options) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (projectConfig?.targets?.e2e) {
+        throw new Error(`Project ${options.project} already has an e2e target.
+Rename or remove the existing e2e target.`);
+    }
+    if (!options.baseUrl &&
+        !options.devServerTarget &&
+        !projectConfig.targets.serve) {
+        throw new Error(`The project ${options.project} does not have a 'serve' target.
+In this case you need to provide a devServerTarget,'<projectName>:<targetName>[:<configName>]', or a baseUrl option`);
+    }
+    options.directory ??= 'src';
+    const devServerTarget = options.devServerTarget ??
+        (projectConfig.targets.serve ? `${options.project}:serve` : undefined);
+    if (!options.baseUrl && !devServerTarget) {
+        throw new Error('Either baseUrl or devServerTarget must be provided');
+    }
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    options.addPlugin ??=
+        process.env.NX_ADD_PLUGINS !== 'false' &&
+            nxJson.useInferencePlugins !== false;
+    return {
+        ...options,
+        bundler: options.bundler ?? 'webpack',
+        rootProject: options.rootProject ?? projectConfig.root === '.',
+        linter: options.linter ?? eslint_1.Linter.EsLint,
+        devServerTarget,
+    };
+}
+async function addFiles(tree, options, projectGraph, hasPlugin) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const cyVersion = (0, cypress_version_1.installedCypressVersion)();
+    const filesToUse = cyVersion && cyVersion < 10 ? 'v9' : 'v10';
+    const hasTsConfig = tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'));
+    const offsetFromProjectRoot = options.directory
+        .split('/')
+        .map((_) => '..')
+        .join('/');
+    const fileOpts = {
+        ...options,
+        dir: options.directory ?? 'src',
+        ext: options.js ? 'js' : 'ts',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(projectConfig.root),
+        offsetFromProjectRoot,
+        projectRoot: projectConfig.root,
+        tsConfigPath: hasTsConfig
+            ? `${offsetFromProjectRoot}/tsconfig.json`
+            : (0, js_1.getRelativePathToRootTsConfig)(tree, projectConfig.root),
+        tmpl: '',
+    };
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files', filesToUse), projectConfig.root, fileOpts);
+    if (filesToUse === 'v10') {
+        (0, base_setup_1.addBaseCypressSetup)(tree, {
+            project: options.project,
+            directory: options.directory,
+            jsx: options.jsx,
+            js: options.js,
+        });
+        const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, options.js ? 'cypress.config.js' : 'cypress.config.ts');
+        let webServerCommands;
+        let ciWebServerCommand;
+        if (hasPlugin && options.webServerCommands && options.ciWebServerCommand) {
+            webServerCommands = options.webServerCommands;
+            ciWebServerCommand = options.ciWebServerCommand;
+        }
+        else if (hasPlugin && 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']) {
+                webServerCommands.production = `nx run ${parsedTarget.project}:${parsedTarget.target}:production`;
+            }
+            // Add ci/static e2e target if serve target is found
+            if (devServerProjectConfig?.targets?.['serve-static']) {
+                ciWebServerCommand = `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,
+            webServerCommands,
+            ciWebServerCommand: ciWebServerCommand,
+        }, options.baseUrl);
+        tree.write(cyFile, updatedCyConfig);
+    }
+    if (cyVersion &&
+        cyVersion < 7 &&
+        tree.exists((0, devkit_1.joinPathFragments)(projectConfig.root, 'src', 'plugins', 'index.js'))) {
+        (0, devkit_1.updateJson)(tree, (0, path_1.join)(projectConfig.root, 'cypress.json'), (json) => {
+            json.pluginsFile = './src/plugins/index';
+            return json;
+        });
+    }
+    else if (cyVersion < 10) {
+        const pluginPath = (0, path_1.join)(projectConfig.root, 'src/plugins/index.js');
+        if (tree.exists(pluginPath)) {
+            tree.delete(pluginPath);
+        }
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(tree);
+    }
+}
+function addTarget(tree, opts) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, opts.project);
+    const cyVersion = (0, cypress_version_1.installedCypressVersion)();
+    projectConfig.targets ??= {};
+    projectConfig.targets.e2e = {
+        executor: '@nx/cypress:cypress',
+        options: {
+            cypressConfig: (0, devkit_1.joinPathFragments)(projectConfig.root, cyVersion && cyVersion < 10
+                ? 'cypress.json'
+                : `cypress.config.${opts.js ? 'js' : 'ts'}`),
+            testingType: 'e2e',
+        },
+    };
+    if (opts.devServerTarget) {
+        const parsedTarget = (0, devkit_1.parseTargetString)(opts.devServerTarget);
+        projectConfig.targets.e2e.options = {
+            ...projectConfig.targets.e2e.options,
+            devServerTarget: opts.devServerTarget,
+            port: opts.port,
+        };
+        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']) {
+            projectConfig.targets.e2e.configurations ??= {};
+            projectConfig.targets.e2e.configurations['production'] = {
+                devServerTarget: `${parsedTarget.project}:${parsedTarget.target}:production`,
+            };
+        }
+        // Add ci/static e2e target if serve target is found
+        if (devServerProjectConfig.targets?.['serve-static']) {
+            projectConfig.targets.e2e.configurations ??= {};
+            projectConfig.targets.e2e.configurations.ci = {
+                devServerTarget: `${parsedTarget.project}:serve-static`,
+            };
+        }
+    }
+    else if (opts.baseUrl) {
+        projectConfig.targets.e2e.options = {
+            ...projectConfig.targets.e2e.options,
+            baseUrl: opts.baseUrl,
+        };
+    }
+    (0, devkit_1.updateProjectConfiguration)(tree, opts.project, projectConfig);
+}
+exports.default = configurationGenerator;

package/src/generators/configuration/files/v10/__directory__/e2e/app.cy.ts__tmpl__

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('<%= project %>', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains(/Welcome/);
+  });
+});

package/src/generators/configuration/files/v10/__directory__/support/app.po.ts__tmpl__

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

package/src/generators/configuration/files/v10/__directory__/support/e2e.ts__tmpl__

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

package/src/generators/configuration/files/v9/__directory__/fixtures/example.json__tmpl__

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

package/src/generators/configuration/files/v9/__directory__/integration/app.spec.ts__tmpl__

@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('<%= project %>', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains(/Welcome/);
+  });
+});

package/src/generators/configuration/files/v9/__directory__/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nx/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};

package/src/generators/configuration/files/v9/__directory__/support/app.po.ts__tmpl__

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');

package/src/generators/configuration/files/v9/__directory__/support/commands.ts__tmpl__

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+<% if (linter === 'eslint') { %>
+// eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+declare namespace Cypress {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/configuration/files/v9/__directory__/support/index.ts__tmpl__

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';

package/src/generators/configuration/files/v9/__directory__/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "<%= tsConfigPath %>",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}