@nrwl/angular:cypress-component-configuration

Add a Cypress component testing configuration to an existing project. Cypress v10.7.0 or higher is required.

Can I use component testing?

Angular component testing with Nx requires Cypress version 10.7.0 and up.

You can migrate with to v10 via the migrate-to-cypress-10 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

This generator is designed to get your Angular project up and running with Cypress Component Testing.

nx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project

Running this generator, adds the required files to the specified project with a preconfigured cypress.config.ts designed for Nx workspaces.

cypress.config.ts
import { defineConfig } from 'cypress'; import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing'; export default defineConfig({ component: nxComponentTestingPreset(__filename), });

Here is an example on how to add custom options to the configuration

cypress.config.ts
import { defineConfig } from 'cypress'; import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing'; export default defineConfig({ component: { ...nxComponentTestingPreset(__filename), // extra options here }, });

Specifying a Build Target

Component testing requires a build target to correctly run the component test dev server. This option can be manually specified with --build-target=some-angular-app:build, but Nx will infer this usage from the project graph if one isn't provided.

For Angular projects, the build target needs to be using the @nrwl/angular:webpack-browser or @angular-devkit/build-angular:browser executor. The generator will throw an error if a build target can't be found and suggest passing one in manually.

Letting Nx infer the build target by default

nx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project

Manually specifying the build target

nx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project --build-target:some-angular-app:build --generate-tests
Build Target with Configuration

If you're wanting to use a build target with a specific configuration. i.e. my-app:build:production, then manually providing --build-target=my-app:build:production is the best way to do that.

Auto Generating Tests

You can optionally use the --generate-tests flag to generate a test file for each component in your project.

nx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-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-angular-project

Here is an example of the project configuration that is generated. The --build-target option is added as the devServerTarget which can be changed as needed.

project.json
{ "targets" { "component-test": { "executor": "@nrwl/cypress:cypress", "options": { "cypressConfig": "<path-to-project-root>/cypress.config.ts", "testingType": "component", "devServerTarget": "some-angular-app:build", "skipServe": true } } } }

Nx also supports React component testing.

Usage

nx generate cypress-component-configuration ...

By default, Nx will search for cypress-component-configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nrwl/angular:cypress-component-configuration ...

Show what will be generated without writing to disk:

nx g cypress-component-configuration ... --dry-run

Options

buildTarget

string
Pattern: ^[^:\\s]+:[^:\\s]+(:\\S+)?$

A build target used to configure Cypress component testing in the format of project:target[:configuration]. The build target should be an angular app. If not provided we will try to infer it from your projects usage.

project

Required
string

The name of the project to add cypress component testing configuration to

generateTests

boolean
Default: false

Generate default component tests for existing components in the project

skipFormat

boolean
Default: false

Skip formatting files