@nrwl/cypress:cypress-project
Create Cypress Configuration for the workspace.
Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.
nx g cypress-project --name=my-app-e2e --project=my-app
When providing --project option, the generator will look for the serve target in that given project. This allows the cypress executor to spin up the project and start the cypress runner.
If you prefer to not have the project served automatically, you can provide a --base-url argument in place of --project
nx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234
You can also run the cypress-project generator against API projects like a Nest API. If there is a URL to visit then you can test it with Cypress!
Using Cypress with Vite.js
Now, you can generate your Cypress project with Vite.js as the bundler:
nx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite
This generator will pass the bundler information (bundler: 'vite') to our nxE2EPreset, in your project's cypress.config.ts file (eg. my-app-e2e/cypress.config.ts).
Customizing the Vite.js configuration
The nxE2EPreset will then use the bundler information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the file:preprocessor event. If you want to customize this behaviour, you can do so like this in your project's cypress.config.ts file:
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
const config = nxE2EPreset(__filename, { bundler: 'vite' });
export default defineConfig({
e2e: {
...config,
setupNodeEvents(on, config): {
config.setupNodeEvents(on);
// Your settings here
}
},
});
Usage
nx generate cypress-project ...
By default, Nx will search for cypress-project in the default collection provisioned in workspace.json.
You can specify the collection explicitly as follows:
nx g @nrwl/cypress:cypress-project ...
Show what will be generated without writing to disk:
nx g cypress-project ... --dry-run