ContextQMD
Back to Nx

Update Component Testing Mount Imports

packages/cypress/src/migrations/update-20-8-0/update-component-testing-mount-imports.md

22.7.13.0 KB
Original Source

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.

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

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

Cypress.Commands.add('mount', mount);
After
ts
import { mount } from 'cypress/angular';
import './commands';

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

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

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.

Before
json
{
  "name": "@my-repo/source",
  "dependencies": {
    ...
    "cypress": "^14.2.1"
  }
}
ts
import { mount } from 'cypress/angular';
import './commands';

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

Cypress.Commands.add('mount', mount);
After
json
{
  "name": "@my-repo/source",
  "dependencies": {
    ...
    "cypress": "^14.2.1",
    "@cypress/angular": "^2.1.0"
  }
}
ts
import { mount } from '@cypress/angular';
import './commands';

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

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

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.

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

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

Cypress.Commands.add('mount', mount);
After
ts
import { mount } from 'cypress/react';
import './commands';

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

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