Rescope @nrwl to @nx
@nx/reactSee schema

@nx/react:component-test

Add a Cypress component test for a component.

Can I use component testing?

React component testing with Nx requires Cypress version 10 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're wanting to create Cypress tests for a Storybook story, then check out the component-cypress-spec generator docs

If you're wanting to create Storybook stories for a component, then check out the stories generator docs or component-story generator docs

This generator is used to create a Cypress component test file for a given React component.

❯

nx g @nx/react:component-test --project=my-cool-react-project --componentPath=src/my-fancy-button.tsx

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

Test file are generated with the .cy. suffix. this is to prevent colliding with any existing .spec. files contained in the project.

It's currently expected the generated .cy. file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the cypress-component-project generator to set up the project for component testing.

Usage

1nx generate component-test ... 2

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

You can specify the collection explicitly as follows:

1nx g @nx/react:component-test ... 2
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

1nx g component-test ... --dry-run 2

Examples

Create a cypress component test for FancyComponent:

1nx g @nx/react:component-test --project=my-react-project --component-path=src/lib/fancy-component.tsx 2
Nx 15 and lower use @nrwl/ instead of @nx/

Options

componentPath

Required
string

Path to component, from the project source root

project

Required
string

The name of the project the component is apart of