@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. However, this functionality is deprecated, and will be removed on Nx version 18.

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

Nx 15 and lower use @nrwl/ instead of @nx/

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 '@nx/next/plugins/component-testing';

export default defineConfig({
  component: nxComponentTestingPreset(__filename),
});
Nx 15 and lower use @nrwl/ instead of @nx/

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

cypress.config.ts
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';

export default defineConfig({
  component: {
    ...nxComponentTestingPreset(__filename),
    // extra options here
  },
});
Nx 15 and lower use @nrwl/ instead of @nx/

❯

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

Nx 15 and lower use @nrwl/ instead of @nx/

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

Nx 15 and lower use @nrwl/ instead of @nx/

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": "@nx/cypress:cypress",
      "options": {
        "cypressConfig": "<path-to-project-root>/cypress.config.ts",
        "testingType": "component",
        "skipServe": true
      }
    }
  }
}
Nx 15 and lower use @nrwl/ instead of @nx/

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 @nx/next:cypress-component-configuration --project=my-next-project

Nx 15 and lower use @nrwl/ instead of @nx/

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

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

Nx 15 and lower use @nrwl/ instead of @nx/

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

Internal

boolean

Default: false

Skip formatting files