2b820a274e
- Update `/packages/` links to `/nx-api/` - Convert some unneeded absolute links to relative - Remove leftover examples doc for the already removed `cypress-project` generator <!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #26126
80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
{% callout type="caution" title="Can I use component testing?" %}
|
|
Next component testing with Nx requires **Cypress version 10.7.0** and up.
|
|
|
|
You can migrate with to v11 via the [migrate-to-cypress-11 generator](/nx-api/cypress/generators/migrate-to-cypress-11).
|
|
|
|
This generator is for Cypress based component testing.
|
|
|
|
If you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/nx-api/react/generators/storybook-configuration). However, this functionality is deprecated, and will be removed on Nx version 19.
|
|
{% /callout %}
|
|
|
|
This generator is designed to get your Next project up and running with Cypress Component Testing.
|
|
|
|
```shell
|
|
nx g @nx/next:cypress-component-configuration --project=my-cool-next-project
|
|
```
|
|
|
|
Running this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.
|
|
|
|
```ts {% fileName="cypress.config.ts" %}
|
|
import { defineConfig } from 'cypress';
|
|
import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
|
|
|
|
export default defineConfig({
|
|
component: nxComponentTestingPreset(__filename),
|
|
});
|
|
```
|
|
|
|
Here is an example on how to add custom options to the configuration
|
|
|
|
```ts {% fileName="cypress.config.ts" %}
|
|
import { defineConfig } from 'cypress';
|
|
import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
|
|
|
|
export default defineConfig({
|
|
component: {
|
|
...nxComponentTestingPreset(__filename),
|
|
// extra options here
|
|
},
|
|
});
|
|
```
|
|
|
|
```shell
|
|
nx g @nx/next:cypress-component-project --project=my-cool-next-project
|
|
```
|
|
|
|
## Auto Generating Tests
|
|
|
|
You can optionally use the `--generate-tests` flag to generate a test file for each component in your project.
|
|
|
|
```shell
|
|
nx g @nx/next:cypress-component-configuration --project=my-cool-next-project --generate-tests
|
|
```
|
|
|
|
## Running Component Tests
|
|
|
|
A new `component-test` target will be added to the specified project to run your component tests.
|
|
|
|
```shell
|
|
nx g component-test my-cool-next-project
|
|
```
|
|
|
|
Here is an example of the project configuration that is generated.
|
|
|
|
```json {% fileName="project.json" %}
|
|
{
|
|
"targets" {
|
|
"component-test": {
|
|
"executor": "@nx/cypress:cypress",
|
|
"options": {
|
|
"cypressConfig": "<path-to-project-root>/cypress.config.ts",
|
|
"testingType": "component",
|
|
"skipServe": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Nx also supports [Angular component testing](/nx-api/angular/generators/cypress-component-configuration).
|