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
2.5 KiB
{% 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.
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. 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.
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.
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
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
export default defineConfig({
component: {
...nxComponentTestingPreset(__filename),
// extra options here
},
});
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.
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.
nx g component-test my-cool-next-project
Here is an example of the project configuration that is generated.
{
"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.