@nx/next:cypress-component-configuration

Add Cypress Componet Testing to an existing NextJS project.

Can I use component testing?

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

You can migrate with to v10 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

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

nx g @nrwl/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.

cypress.config.ts
import { defineConfig } from 'cypress'; import { nxComponentTestingPreset } from '@nrwl/next/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/next/plugins/component-testing'; export default defineConfig({ component: { ...nxComponentTestingPreset(__filename), // extra options here }, });
nx g @nrwl/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 @nrwl/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.

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

Nx also supports Angular 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 @nx/next:cypress-component-configuration ...
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

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

Examples

Add component testing to your Next project:

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

Add component testing to your Next project and generate component tests for your existing components:

nx g @nrwl/next:cypress-component-configuration --project=my-next-project --generate-tests

Options

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