Support Cypress Component Testing with Next.js

[dallonf]

• [ ] I'd be willing to implement this feature (contributing guide)

Description

Cypress Component Testing seems like it would be a very useful workflow, but unfortunately Nx doesn't seem to support it for Next.js projects.

Running a command like:

nx g @nrwl/react:cypress-component-configuration --project=my-project --build-target=web:build

(by the way, the official documentation states to run react:cypress-component-project instead of -configuration, which is incorrect)

results in this errors:

 ERROR  The provided build target, web:build, uses the '@nrwl/next:build' executor.
But only the follow executors are allowed
- @nrwl/webpack:webpack

Motivation

I was pretty excited to use Cypress Component Testing to have a visual debugging environment for UI component tests, and Nx seemed to support it, but I was frustrated to discover the support was only for vanilla React projects, not Next.js.

Suggested Implementation

Since Nx already supports Cypress Component Testing and Cypress Component already supports Next.js, it seems like there's only a small missing piece required to allow it to use a Next build executor instead of Webpack.

Alternate Implementations

If it's already possible to do this and I just haven't figured it out, extending the documentation to explain what to do for this use case would be extremely helpful.

[barbados-clemens]

this is on the roadmap to start working on in the coming months

[shawngustaw]

+1 this is something we'd love to have as well. Anything I can do to help move this along please lmk :)

[lumiiartan]

Does anyone know if Vue will be supported soon for Cypress component testing in Nx, considering that Nx currently supports Angular and React?

[barbados-clemens]

@lumiiartan If using vite with Vue then you should be able to just use the default setup that cypress recommends.

you can use the @nrwl/cypress:cypress-component-project generator to generate the boiler plate code and then add to the config the requirements for Vue.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.