nx/docs/shared/guides/cypress/cypress-v10-migration.md
Caleb Ukle 8154191eb1
feat(testing): Cypress 10 and component testing support (#9201)
* feat(testing): add generator to aid in the migration to cypress 10

cypress 10 introduces a new configuration format and new layout that requires update settings and
files for e2e projects

* feat(testing): cypress component tests for react/next

initial work for cypress component tests for react and next

* feat(testing): add support for v10 e2e cypress projects

create the correct files for cypress projects >v10 and reorganize tests based on version to allow
easier parsing of tests

* feat(testing): add utils for modifying cypress v10 config

provide ts transformers to take in an existing cypress config and update/add properties within the
given configuration

* fix(testing): fix tests affected by the cypress v10 changes

update tests to assert the correct files/folders/file contents due to the cypress changes in v10

* cleanup(testing): move cypress component testing plugins into the respective packages

move the plugins into out of cypress plugins into the specific vertical plugin to prevent issues
with circular refs

* cleanup(testing): bump cypress version

bump to latest cypress v10 release

* docs(testing): update docs for cypress 10

update cypress docs to include info about component testing and migration to cypress v10

* fix(repo): revert cypress version bump

keep v9 of cypress installed for nx repo until v10 release

* fix(testing): update cypress gen tsconfig and infer targets with converter

* fix(testing): make sure tests use the cypress v10 (for the intermediate)

* fix(testing): update target name after feedback

* fix(testing): support multiple target w/custom configs for cypress v10 migration

* fix(testing): refactor cy component tests into seperate verticals

* feat(testing): create storybook cypress preset

* fix(testing): clean up cy v10 migration

* fix(testing): don't branch for cypress executor testingType

* fix(testing): move cy comp test generator to next

* fix(testing): bump cypress deps

* fix(testing): clean up cy component testing generators

* fix(testing): update cy component testing docs

* fix(testign): dep check. runtime plugin pulls from @nrwl/react

* fix(testing): move e2e into verticals

* fix(testing): address PR feedback

* fix(testing): clean up unit tests

* feat(angular): support migrating angular cli workspaces using cypress v10

* chore(testing): update e2e tests

* fix(testing): address pr feedback

* chore(testing): remove cypress component testing for next.js

* fix(testing): address pr feedback

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
2022-07-08 14:34:00 -05:00

1.4 KiB

Migrating to Cypress V10

Cypress v10 introduce new features, like component testing, along with some breaking changes.

Before continuing, make sure you have all your changes committed and have a clean working tree.

You can migrate an E2E project to v10 by running the following command:

nx g @nrwl/cypress:migrate-to-cypress-10

In general, these are the steps taken to migrate your project:

  1. Migrates your existing cypress.json configuration to a new cypress.config.ts configuration file.
    • The pluginsFile option has been replaced for setupNodeEvents. We will import the file and add it to the setupNodeEvents config option. Double-check your plugins are working correctly.
  2. Rename all test files from .spec.ts to .cy.ts
  3. Rename the support/index.ts to support/e2e.ts and update any associated imports
  4. Rename the integrations folder to the e2e folder

We take the best effort to make this migration seamless, but there can be edge cases we didn't anticipate. So feel free to open an issue if you come across any problems.

You can also consult the official Cypress migration guide if you get stuck and want to manually migrate your projects.