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>
1.4 KiB
Cypress Component Testing
Component testing is in a early preview and requires Cypress v10 and above. See our guide for more information to migrate to Cypress v10.
Unlike E2E testing, component testing does not create a new project. Instead, Cypress component testing is added directly to a project.
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.