Build and Test React Apps with Nx and Cypress

Use Nx to create and manage a React application, then use Cypress to run browser-based end-to-end tests against it. You’ll need Node.js and npm, plus a terminal; the commands below use Nx’s current integrated workspace approach and can be adapted to an existing Nx project.

What You’ll Need

• A supported, maintained Node.js release and npm. Check the Nx installation requirements if setup reports an unsupported version.
• A terminal and a code editor.
• An internet connection for installing project dependencies.

Step-by-Step

1. Create an Nx workspace. In a terminal, run npx create-nx-workspace@latest. Follow the prompts: choose an integrated workspace, select React when asked for a stack or application, and choose a workspace name. The exact prompts can change between Nx releases. If you are asked whether to create an application immediately, choose yes for a straightforward starting point. When setup finishes, change into the workspace directory, for example cd my-workspace.
2. Check what Nx generated. Run npx nx show projects to list projects. Identify the React application name; it may be the workspace name or another name you chose. In an Nx workspace, commands generally follow npx nx <target> <project>. Use the project name, not necessarily its folder name, in later commands.
3. Start the app and verify the development server. Run npx nx serve my-app, replacing my-app with the listed application name. Nx prints the local address when the server is ready. Open that address in a browser and check that the app loads. Stop the server with Ctrl+C before continuing, or leave it running in a separate terminal when using Cypress interactively.
4. Add Cypress end-to-end support. Nx plugins provide project-specific targets and configuration. If the workspace did not create an end-to-end project, install the Cypress plugin using npx nx add @nx/cypress. This command aligns the plugin with the workspace’s Nx version. Then generate an end-to-end project with npx nx g @nx/cypress:configuration --project=my-app, replacing the project name as needed. Review the generator prompts and files it creates. Depending on the Nx version and choices, configuration may be added to the app or a separate e2e project.
5. Inspect available targets. Run npx nx show project my-app. Look for targets such as e2e, component-test, or serve. Nx generators and plugin versions determine the exact target names and configuration. If an e2e target belongs to a separate project, use that project’s name in the command rather than assuming it is the app name.
6. Write a first end-to-end test. Open the Cypress spec directory identified in the generated configuration; common locations include an e2e project’s src folder or a configured cypress/e2e folder. Add a spec such as app.cy.ts using the project’s existing file conventions. For example:
   describe('app', () => {
  it('shows the home page', () => {
   cy.visit('/');
   cy.get('body').should('be.visible');
  });
});
   This checks that the configured app URL opens and renders a page. Improve it by asserting a stable, meaningful heading or element from your application rather than relying only on the body.
7. Run the tests. For a terminal run, use npx nx e2e my-app-e2e if the e2e project is named my-app-e2e; substitute the target project shown by Nx. To open Cypress interactively, try npx nx e2e my-app-e2e --watch if that option is supported by the generated target. Alternatively, inspect the target configuration for the Cypress open command. Select the spec in Cypress and watch the browser execute it. A generated target may start the application automatically; if it does not, start the app separately and check the configured base URL.
8. Build the React app and run checks before changes are merged. Run npx nx build my-app to verify the production build, then run the e2e target again. Use npx nx run-many -t build,e2e to run those targets for eligible projects in the workspace, or specify projects as appropriate. A build and an e2e test answer different questions: the build checks compilation and bundling, while Cypress checks behavior in a browser.

Common Mistakes

• Using the wrong project name. Workspace names, app names, and e2e project names can differ. Check npx nx show projects before copying a command.
• Assuming the server is available. A Cypress run can fail if its configured web server did not start or its base URL is wrong. Check the target configuration and start the app at the expected URL.
• Mixing incompatible package versions. Avoid installing a random Cypress or Nx plugin version by hand. Prefer nx add and follow any migration guidance shown by Nx.
• Writing brittle selectors. CSS classes and layout details often change. Prefer accessible roles, labels, or stable test attributes for elements the test must identify.
• Confusing unit and end-to-end tests. Cypress e2e tests exercise a running application in a browser. They do not replace focused unit tests for individual functions or components.

Tips

• Commit the generated configuration and lockfile so teammates and CI use the same dependencies.
• Give each test a clear user-visible outcome to check, and keep tests independent so one failure does not cascade into others.
• Use Nx’s project and task commands to inspect targets: npx nx show project my-app and npx nx graph can clarify workspace structure.
• Run tests in CI using the same Nx target used locally. Configure CI to install dependencies from the lockfile and provide any required environment variables or services.

Troubleshooting

If a command says a project or target cannot be found, list projects and inspect the project configuration. The generator may have created a separately named e2e project, or your Nx version may use a different target. If installation fails, check the Node.js version against Nx requirements, then reinstall dependencies using the repository’s package manager and lockfile.

If Cypress opens but cannot load the app, confirm the development server is running, visit its printed URL directly, and compare it with the configured base URL. If a headless test fails but works in the interactive runner, examine the terminal output, browser console, timing, and environment-specific settings; wait for a meaningful app condition rather than adding arbitrary long delays. For persistent failures, run the target with Nx output options such as --verbose and review the generated Cypress and Nx configuration.

Frequently Asked Questions

Does Nx include Cypress automatically?
Not always. A workspace generator may offer e2e setup, but you can add the Nx Cypress plugin and configure a project if it was not included.

What is the difference between Nx and Cypress?
Nx manages the workspace, projects, and task execution. Cypress runs browser-based tests; the Nx plugin connects Cypress commands to Nx projects and targets.

Do I need to start the app manually for Cypress?
It depends on the generated target. Some configurations start a development server for you; others expect a running app. Check the target’s configuration and base URL.

Can I run Cypress tests without opening a browser window?
Yes. Use the configured e2e target in terminal mode, which is typically suitable for CI. The exact command and browser settings depend on the project configuration.

Should I use Cypress for every React test?
No. Use e2e tests for important flows through the running app. Use unit or component tests for smaller pieces where a full browser journey is unnecessary.

How do I find the right test command?
Run npx nx show projects, then inspect the relevant app or e2e project with npx nx show project PROJECT_NAME to see its available targets.

Related

• Gmail POP3 and SMTP Settings for Email Apps
• Video Error 0x80070057: How to Fix It in Windows
• Specified Device Name Is Invalid in Windows: Fix It