8154191eb1
* 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>
31 lines
1.4 KiB
Markdown
31 lines
1.4 KiB
Markdown
# 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).
|