@nx/cypress - Migrations

The @nx/cypress plugin provides various migrations to help you migrate to newer versions of cypress projects within your Nx workspace. Below is a complete reference for all available migrations.

21.0.x

remove-tsconfig-and-copy-files-options-from-cypress-executor

Version: 21.0.0-beta.10

Removes the tsConfig and copyFiles options from the @nx/cypress:cypress executor.

Remove tsConfig and copyFiles Options from Cypress Executor

Removes the previously deprecated and unused tsConfig and copyFiles options from the @nx/cypress:cypress executor configuration in all projects.

Examples

Remove the options from the project configuration:

{% tabs %} {% tab label=“Before” %}

{
  "targets": {
    "e2e": {
      "executor": "@nx/cypress:cypress",
      "options": {
        "cypressConfig": "apps/app1-e2e/cypress.config.ts",
        "tsConfig": "apps/app1-e2e/tsconfig.json",
        "copyFiles": "**/*.spec.ts",
        "devServerTarget": "app1:serve"
      }
    }
  }
}

{% /tab %}

{% tab label=“After” %}

{
  "targets": {
    "e2e": {
      "executor": "@nx/cypress:cypress",
      "options": {
        "cypressConfig": "apps/app1-e2e/cypress.config.ts",
        "devServerTarget": "app1:serve"
      }
    }
  }
}

{% /tab %} {% /tabs %}

Remove the options from a target default using the @nx/cypress:cypress executor:

{% tabs %} {% tab label=“Before” %}

{
  "targetDefaults": {
    "e2e": {
      "cache": true,
      "executor": "@nx/cypress:cypress",
      "options": {
        "tsConfig": "{projectRoot}/tsconfig.json",
        "copyFiles": "**/*.spec.ts"
      }
    }
  }
}

{% /tab %}

{% tab label=“After” %}

{
  "targetDefaults": {
    "e2e": {
      "cache": true,
      "executor": "@nx/cypress:cypress"
    }
  }
}

{% /tab %} {% /tabs %}

Remove the options from a target default using the @nx/cypress:cypress executor as the key:

{% tabs %} {% tab label=“Before” %}

{
  "targetDefaults": {
    "@nx/cypress:cypress": {
      "cache": true,
      "options": {
        "tsConfig": "{projectRoot}/tsconfig.json",
        "copyFiles": "**/*.spec.ts"
      }
    }
  }
}

{% /tab %}

{% tab label=“After” %}

{
  "targetDefaults": {
    "@nx/cypress:cypress": {
      "cache": true
    }
  }
}

{% /tab %} {% /tabs %}

20.8.x

set-inject-document-domain

Version: 20.8.0-beta.0

Replaces the experimentalSkipDomainInjection configuration option with the new injectDocumentDomain configuration option.

Requires

Name	Version
cypress	>=14.0.0

Set injectDocumentDomain Configuration Option

Replaces the removed experimentalSkipDomainInjection configuration option with the new injectDocumentDomain configuration option when needed. Skipping domain injection is the default behavior in Cypress v14 and therefore, it is required to use the cy.origin() command when navigating between domains. The injectDocumentDomain option was introduced to ease the transition to v14, but it is deprecated and will be removed in Cypress v15. Read more at the migration notes.

Examples

If the experimentalSkipDomainInjection configuration option is present, the migration will remove it. This is to account for the fact that skipping domain injection is the default behavior in Cypress v14.

{% tabs %} {% tab label=“Before” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
    experimentalSkipDomainInjection: ['https://example.com'],
  },
});

{% /tab %}

{% tab label=“After” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
  },
});

{% /tab %}

{% /tabs %}

If the experimentalSkipDomainInjection configuration option is present and set to an empty array (no domain injection is skipped), the migration will remove it and will set the injectDocumentDomain option to true.

{% tabs %} {% tab label=“Before” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
    experimentalSkipDomainInjection: [],
  },
});

{% /tab %}

{% tab label=“After” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
    // Please ensure you use `cy.origin()` when navigating between domains and remove this option.
    // See https://docs.cypress.io/app/references/migration-guide#Changes-to-cyorigin
    injectDocumentDomain: true,
  },
});

{% /tab %}

{% /tabs %}

If the experimentalSkipDomainInjection configuration option is not present (no domain injection is skipped), the migration will set the injectDocumentDomain option to true.

{% tabs %} {% tab label=“Before” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
  },
});

{% /tab %}

{% tab label=“After” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
    // Please ensure you use `cy.origin()` when navigating between domains and remove this option.
    // See https://docs.cypress.io/app/references/migration-guide#Changes-to-cyorigin
    injectDocumentDomain: true,
  },
});

{% /tab %}

{% /tabs %}

remove-experimental-fetch-polyfill

Version: 20.8.0-beta.0

Removes the experimentalFetchPolyfill configuration option.

Requires

Name	Version
cypress	>=14.0.0

Remove experimentalFetchPolyfill Configuration Option

Removes the experimentalFetchPolyfill configuration option that was removed in Cypress v14. Read more at the migration notes.

Examples

{% tabs %} {% tab label=“Before” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
    experimentalFetchPolyfill: true,
  },
});

{% /tab %}

{% tab label=“After” %}

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename, {
      cypressDir: 'src',
      bundler: 'vite',
      webServerCommands: {
        default: 'pnpm exec nx run app1:dev',
        production: 'pnpm exec nx run app1:dev',
      },
      ciWebServerCommand: 'pnpm exec nx run app1:dev',
      ciBaseUrl: 'http://localhost:4200',
    }),
    baseUrl: 'http://localhost:4200',
  },
});

{% /tab %}

{% /tabs %}

replace-experimental-just-in-time-compile

Version: 20.8.0-beta.0

Replaces the experimentalJustInTimeCompile configuration option with the new justInTimeCompile configuration option.

Requires

Name	Version
cypress	>=14.0.0

Replace the experimentalJustInTimeCompile Configuration Option with justInTimeCompile

Replaces the experimentalJustInTimeCompile configuration option with the new justInTimeCompile configuration option. Read more at the migration notes.

Examples

If the experimentalJustInTimeCompile configuration option is present and set to true, the migration will remove it. This is to account for the fact that JIT compilation is the default behavior in Cypress v14.

{% tabs %} {% tab label=“Before” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    experimentalJustInTimeCompile: true,
  },
});

{% /tab %}

{% tab label=“After” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
  },
});

{% /tab %} {% /tabs %}

If the experimentalJustInTimeCompile configuration option is set to false and it is using webpack, the migration will rename it to justInTimeCompile.

{% tabs %} {% tab label=“Before” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    experimentalJustInTimeCompile: false,
  },
});

{% /tab %}

{% tab label=“After” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    justInTimeCompile: false,
  },
});

{% /tab %} {% /tabs %}

If the experimentalJustInTimeCompile configuration is set to any value and it is using Vite, the migration will remove it. This is to account for the fact that JIT compilation no longer applies to Vite.

{% tabs %} {% tab label=“Before” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    experimentalJustInTimeCompile: false,
  },
});

{% /tab %}

{% tab label=“After” %}

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
  },
});

{% /tab %} {% /tabs %}

update-component-testing-mount-imports

Version: 20.8.0-beta.0

Updates the module specifier for the Component Testing mount function.

Requires

Name	Version
cypress	>=14.0.0

Update Component Testing mount Imports

Updates the relevant module specifiers when importing the mount function and using the Angular or React frameworks. Read more at the Angular migration notes and the React migration notes.

Examples

If using the Angular framework with a version greater than or equal to v17.2.0 and importing the mount function from the cypress/angular-signals module, the migration will update the import to use the cypress/angular module.

{% tabs %} {% tab label=“Before” %}

import { mount } from 'cypress/angular-signals';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %}

{% tab label=“After” %}

import { mount } from 'cypress/angular';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %} {% /tabs %}

If using the Angular framework with a version lower than v17.2.0 and importing the mount function from the cypress/angular module, the migration will install the @cypress/angular@2 package and update the import to use the @cypress/angular module.

{% tabs %} {% tab label=“Before” %}

{
  "name": "@my-repo/source",
  "dependencies": {
    ...
    "cypress": "^14.2.1"
  }
}

import { mount } from 'cypress/angular';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %}

{% tab label=“After” %}

{
  "name": "@my-repo/source",
  "dependencies": {
    ...
    "cypress": "^14.2.1",
    "@cypress/angular": "^2.1.0"
  }
}

import { mount } from '@cypress/angular';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %} {% /tabs %}

If using the React framework and importing the mount function from the cypress/react18 module, the migration will update the import to use the cypress/react module.

{% tabs %} {% tab label=“Before” %}

import { mount } from 'cypress/react18';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %}

{% tab label=“After” %}

import { mount } from 'cypress/react';
import './commands';

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

{% /tab %} {% /tabs %}

20.8.0-package-updates

Version: 20.8.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
cypress	^14.2.1	Updated only
@cypress/vite-dev-server	^6.0.3	Updated only
@cypress/webpack-dev-server	^4.0.2	Updated only

19.6.x

update-19-6-0-update-ci-webserver-for-vite

Version: 19.6.0-beta.4

Update ciWebServerCommand to use static serve for the application.

19.4.x

19.4.1-package-updates

Version: 19.4.1-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
cypress	^13.13.0	Updated only

19.1.x

19.1.0-package-updates

Version: 19.1.0-beta.0

Packages

The following packages will be updated:

Name	Version	Always add to package.json
cypress	^13.8.0	Updated only
@cypress/webpack-dev-server	^3.8.0	Updated only