feat(testing): Cypress 10 and component testing support (nrwl#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 <[email protected]>
Exac · Jul 8, 2022 · 8154191 · 8154191
1 parent a34402f
commit 8154191
Show file tree

Hide file tree

Showing 118 changed files with 5,796 additions and 882 deletions.
diff --git a/docs/generated/packages/cypress.json b/docs/generated/packages/cypress.json
@@ -10,7 +10,19 @@
       "id": "overview",
       "path": "/packages/cypress",
       "file": "shared/cypress-plugin",
-      "content": "![Cypress logo](/shared/cypress-logo.png)\n\nCypress is an e2e test runner built for modern web. It has a lot of great features:\n\n- Time travel\n- Real-time reloads\n- Automatic waiting\n- Spies, stubs, and clocks\n- Network traffic control\n- Screenshots and videos\n\n## Setting Up Cypress\n\n### Generating Applications\n\nBy default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.\n\n```bash\nnx g @nrwl/web:app frontend\n```\n\n### Creating a Cypress E2E project for an existing project\n\nYou can create a new Cypress E2E project for an existing project.\n\nIf the `@nrwl/cypress` package is not installed, install the version that matches your `@nrwl/workspace` version.\n\n```bash\nyarn add --dev @nrwl/cypress\n```\n\n```bash\nnpm install --save-dev @nrwl/cypress\n```\n\nNext, generate an E2E project based on an existing project.\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name\n```\n\nReplace `your-app-name` with the app's name as defined in your `workspace.json` file.\n\n## Using Cypress\n\n### Testing Applications\n\nSimply run `nx e2e frontend-e2e` to execute e2e tests with Cypress.\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your terminal. Screenshots and videos will be accessible in `dist/apps/frontend/screenshots` and `dist/apps/frontend/videos`.\n\n### Watching for Changes\n\nWith, `nx e2e frontend-e2e --watch` Cypress will start in the application mode.\n\nRunning Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application running and Cypress will re-run those tests as you enhance and add to the suite.\n\nCypress doesn't currently re-run your tests after changes are made to application code when it runs in “headed” mode.\n\n### Using Cypress in the Headed Mode\n\nYou can run Cypress in headed mode to see your app being tested. To do this, pass in the `--watch` option. E.g: `nx frontend-e2e --watch`\n\n### Testing Against Prod Build\n\nYou can run your e2e test against a production build like this: `nx e2e frontend-e2e --prod`.\n\n## Configuration\n\n### Specifying a Custom Url to Test\n\nThe `baseUrl` property provides you the ability to test an application hosted on a specific domain.\n\n```bash\nnx e2e frontend-e2e --baseUrl=https://frontend.com\n```\n\n> If no `baseUrl` and no `devServerTarget` are provided, Cypress will expect to have the `baseUrl` property in the `cypress.json` file, or will error.\n\n### Using cypress.json\n\nIf you need to fine tune your Cypress setup, you can do so by modifying `cypress.json` in the e2e project. For instance, you can easily add your `projectId` to save all the screenshots and videos into your Cypress dashboard. The complete configuration is documented on [the official website](https://docs.cypress.io/guides/references/configuration.html#Options).\n\n## More Documentation\n\nReact Nx Tutorial\n\n- [Step 2: Add E2E Tests](/react-tutorial/02-add-e2e-test)\n- [Step 3: Display Todos](/react-tutorial/03-display-todos)\n\nAngular Nx Tutorial\n\n- [Step 2: Add E2E Tests](/angular-tutorial/02-add-e2e-test)\n- [Step 3: Display Todos](/angular-tutorial/03-display-todos)\n"
+      "content": "![Cypress logo](/shared/cypress-logo.png)\n\nCypress is a test runner built for the modern web. It has a lot of great features:\n\n- Time travel\n- Real-time reloads\n- Automatic waiting\n- Spies, stubs, and clocks\n- Network traffic control\n- Screenshots and videos\n\n## Setting Up Cypress\n\n> Info about [Cypress Component Testing can be found here](/cypress/cypress-component-testing)\n\nIf the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.\n\n```bash\nyarn add --dev @nrwl/cypress\n```\n\n```bash\nnpm install --save-dev @nrwl/cypress\n```\n\n## E2E Testing\n\nBy default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.\n\n```bash\nnx g @nrwl/web:app frontend\n```\n\n### Creating a Cypress E2E project for an existing project\n\nTo generate an E2E project based on an existing project, run the following generator\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name\n```\n\nOptionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.\n\n```bash\nnx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200\n```\n\nReplace `your-app-name` with the app's name as defined in your `workspace.json` file.\n\n### Testing Applications\n\nRun `nx e2e frontend-e2e` to execute e2e tests with Cypress.\n\nYou can run your e2e test against a production build with the `--prod` flag\n\n```bash\nnx e2e frontend-e2e --prod\n```\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/apps/frontend/screenshots` and `dist/apps/frontend/videos`.\n\n### Watching for Changes (Headed Mode)\n\nWith, `nx e2e frontend-e2e --watch` Cypress will start in headed mode where you can see your application being tested.\n\nRunning Cypress with `--watch` is a great way to enhance dev workflow - you can build up test files with the application\nrunning and Cypress will re-run those tests as you enhance and add to the suite.\n\n```bash\nnx e2e frontend-e2e --prod\n```\n\n### Specifying a Custom Url to Test\n\nThe `baseUrl` property provides you the ability to test an application hosted on a specific domain.\n\n```bash\nnx e2e frontend-e2e --baseUrl=https://frontend.com\n```\n\n> If no `baseUrl` and no `devServerTarget` are provided, Cypress will expect to have the `baseUrl` property in\n> the cypress config file, or will error.\n\n## Using cypress.config.ts\n\nIf you need to fine tune your Cypress setup, you can do so by modifying `cypress.config.ts` in the project root. For\ninstance,\nyou can easily add your `projectId` to save all the screenshots and videos into your Cypress dashboard. The complete\nconfiguration is documented\non [the official website](https://docs.cypress.io/guides/references/configuration.html#Options).\n"
+    },
+    {
+      "name": "Component Testing",
+      "id": "cypress-component-testing",
+      "file": "shared/cypress-component-testing",
+      "content": "# Cypress Component Testing\n\n> Component testing is in a early preview and requires Cypress v10 and above.\n> See our [guide for more information](/cypress/cypress-v10-migration) to migrate to Cypress v10.\n\nUnlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added\ndirectly to a project.\n\n```bash\nnx g @nrwl/react:cypress-component-configuration --project=your-react-lib\n```\n\nYou can optionally pass in `--generate-tests` to create component tests for all components within the library.\n\n## Testing Projects\n\nRun `nx component-test your-lib` to execute the component tests with Cypress.\n\nBy default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your\nterminal. Screenshots and videos will be accessible in `dist/libs/your-lib/screenshots` and `dist/libs/your-lib/videos`.\n\n## Watching for Changes (Headed Mode)\n\nWith, `nx component-test your-lib --watch` Cypress will start in headed mode. Where you can see your component being tested.\n\nRunning Cypress with `--watch` is a great way to iterate on your components since cypress will rerun your tests as you make those changes validating the new behavior.\n\n## More Information\n\nYou can read more on component testing in the [Cypress documentation](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test).\n"
+    },
+    {
+      "name": "v10 Migration Guide",
+      "id": "v10-migration-guide",
+      "file": "shared/guides/cypress/cypress-v10-migration",
+      "content": "# Migrating to Cypress V10\n\nCypress v10 introduce new features, like component testing, along with some breaking changes.\n\nBefore continuing, make sure you have all your changes committed and have a clean working tree.\n\nYou can migrate an E2E project to v10 by running the following command:\n\n```bash\nnx g @nrwl/cypress:migrate-to-cypress-10\n```\n\nIn general, these are the steps taken to migrate your project:\n\n1. Migrates your existing `cypress.json` configuration to a new `cypress.config.ts` configuration file.\n   - The `pluginsFile` option has been replaced for `setupNodeEvents`. We will import the file and add it to\n     the `setupNodeEvents` config option. Double-check your plugins are working correctly.\n2. Rename all test files from `.spec.ts` to `.cy.ts`\n3. Rename the `support/index.ts` to `support/e2e.ts` and update any associated imports\n4. Rename the `integrations` folder to the `e2e` folder\n\nWe 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](https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+bug&template=1-bug.md) if you come across any problems.\n\nYou can also consult the [official Cypress migration guide](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0) if you get stuck and want to manually migrate your projects.\n"
     }
   ],
   "generators": [
@@ -108,6 +120,64 @@
       "implementation": "/packages/cypress/src/generators/cypress-project/cypress-project#cypressProjectGenerator.ts",
       "aliases": [],
       "path": "/packages/cypress/src/generators/cypress-project/schema.json"
+    },
+    {
+      "name": "cypress-component-project",
+      "factory": "./src/generators/cypress-component-project/cypress-component-project#cypressComponentProject",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "$id": "NxCypressComponentProject",
+        "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 @nrwl/cypress:cypress-component-project --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?"
+          }
+        },
+        "required": ["project"],
+        "presets": []
+      },
+      "description": "Set up Cypress Component Test for a project",
+      "hidden": true,
+      "implementation": "/packages/cypress/src/generators/cypress-component-project/cypress-component-project#cypressComponentProject.ts",
+      "aliases": [],
+      "path": "/packages/cypress/src/generators/cypress-component-project/schema.json"
+    },
+    {
+      "name": "migrate-to-cypress-10",
+      "factory": "./src/generators/migrate-to-cypress-ten/migrate-to-cypress-ten#migrateCypressProject",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "$id": "NxCypressMigrateToTen",
+        "cli": "nx",
+        "title": "Migrate e2e project to Cypress 10",
+        "description": "Migrate Cypress e2e project from v8/v9 to Cypress v10.",
+        "type": "object",
+        "examples": [
+          {
+            "command": "nx g @nrwl/cypress:migrate-to-cypress-10",
+            "description": "Migrate existing cypress projects to Cypress v10"
+          }
+        ],
+        "properties": {},
+        "presets": []
+      },
+      "description": "Migrate existing Cypress e2e projects to Cypress v10",
+      "hidden": true,
+      "implementation": "/packages/cypress/src/generators/migrate-to-cypress-ten/migrate-to-cypress-ten#migrateCypressProject.ts",
+      "aliases": [],
+      "path": "/packages/cypress/src/generators/migrate-to-cypress-ten/schema.json"
     }
   ],
   "executors": [

diff --git a/docs/generated/packages/react.json b/docs/generated/packages/react.json
@@ -1167,6 +1167,91 @@
       "aliases": [],
       "hidden": false,
       "path": "/packages/react/src/generators/remote/schema.json"
+    },
+    {
+      "name": "cypress-component-configuration",
+      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "cli": "nx",
+        "$id": "NxReactCypressComponentTestConfiguration",
+        "title": "Add Cypress component testing",
+        "description": "Add a Cypress component testing configuration to an existing project.",
+        "type": "object",
+        "examples": [
+          {
+            "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project",
+            "description": "Add component testing to your react project"
+          },
+          {
+            "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests",
+            "description": "Add component testing to your react project and generate component tests for your existing components"
+          }
+        ],
+        "properties": {
+          "project": {
+            "type": "string",
+            "description": "The name of the project to add cypress component testing configuration to",
+            "$default": { "$source": "projectName" },
+            "x-prompt": "What project should we add Cypress component testing to?"
+          },
+          "generateTests": {
+            "type": "boolean",
+            "description": "Generate default component tests for existing components in the project",
+            "default": false
+          },
+          "skipFormat": {
+            "type": "boolean",
+            "description": "Skip formatting files",
+            "default": false
+          }
+        },
+        "required": ["project"],
+        "presets": []
+      },
+      "description": "Setup Cypress component testing for a React project",
+      "hidden": false,
+      "implementation": "/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator.ts",
+      "aliases": [],
+      "path": "/packages/react/src/generators/cypress-component-configuration/schema.json"
+    },
+    {
+      "name": "component-test",
+      "factory": "./src/generators/component-test/component-test#componentTestGenerator",
+      "schema": {
+        "$schema": "http://json-schema.org/schema",
+        "cli": "nx",
+        "$id": "NxReactCypressComponentTest",
+        "title": "Add Cypress component test",
+        "description": "Add a Cypress component test for a component.",
+        "type": "object",
+        "examples": [
+          {
+            "command": "nx g @nrwl/react:component-test --project=my-react-project --component-path=src/lib/fancy-component.tsx",
+            "description": "Create a cypress component test for FancyComponent"
+          }
+        ],
+        "properties": {
+          "project": {
+            "type": "string",
+            "description": "The name of the project the component is apart of",
+            "$default": { "$source": "projectName" },
+            "x-prompt": "What project is this component apart of?"
+          },
+          "componentPath": {
+            "type": "string",
+            "description": "Path to component, from the project source root",
+            "x-prompt": "What is the path to the component?"
+          }
+        },
+        "required": ["project", "componentPath"],
+        "presets": []
+      },
+      "description": "Generate a Cypress component test for a React component",
+      "hidden": false,
+      "implementation": "/packages/react/src/generators/component-test/component-test#componentTestGenerator.ts",
+      "aliases": [],
+      "path": "/packages/react/src/generators/component-test/schema.json"
     }
   ],
   "executors": [

diff --git a/docs/map.json b/docs/map.json
@@ -1015,6 +1015,16 @@
             "id": "overview",
             "path": "/packages/cypress",
             "file": "shared/cypress-plugin"
+          },
+          {
+            "name": "Component Testing",
+            "id": "cypress-component-testing",
+            "file": "shared/cypress-component-testing"
+          },
+          {
+            "name": "v10 Migration Guide",
+            "id": "v10-migration-guide",
+            "file": "shared/guides/cypress/cypress-v10-migration"
           }
         ]
       },

diff --git a/docs/packages.json b/docs/packages.json
@@ -74,7 +74,12 @@
     "path": "generated/packages/cypress.json",
     "schemas": {
       "executors": ["cypress"],
-      "generators": ["init", "cypress-project"]
+      "generators": [
+        "init",
+        "cypress-project",
+        "cypress-component-project",
+        "migrate-to-cypress-10"
+      ]
     }
   },
   {
@@ -210,7 +215,9 @@
         "component-cypress-spec",
         "hook",
         "host",
-        "remote"
+        "remote",
+        "cypress-component-configuration",
+        "component-test"
       ]
     }
   },

diff --git a/docs/shared/cypress-component-testing.md b/docs/shared/cypress-component-testing.md
@@ -0,0 +1,30 @@
+# Cypress Component Testing
+
+> Component testing is in a early preview and requires Cypress v10 and above.
+> See our [guide for more information](/cypress/cypress-v10-migration) to migrate to Cypress v10.
+
+Unlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added
+directly to a project.
+
+```bash
+nx g @nrwl/react:cypress-component-configuration --project=your-react-lib
+```
+
+You can optionally pass in `--generate-tests` to create component tests for all components within the library.
+
+## Testing Projects
+
+Run `nx component-test your-lib` to execute the component tests with Cypress.
+
+By default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your
+terminal. Screenshots and videos will be accessible in `dist/libs/your-lib/screenshots` and `dist/libs/your-lib/videos`.
+
+## Watching for Changes (Headed Mode)
+
+With, `nx component-test your-lib --watch` Cypress will start in headed mode. Where you can see your component being tested.
+
+Running Cypress with `--watch` is a great way to iterate on your components since cypress will rerun your tests as you make those changes validating the new behavior.
+
+## More Information
+
+You can read more on component testing in the [Cypress documentation](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test).