How to add e2e test to the existing repo using NX?

user_12702965 0
Viewed 170

In the tutorial video, I can see that when he created a new project NX also create a sibling repo for e2e test cases.

https://nx.dev/react-tutorial/01-create-application

My question is that I got a monorepo which I already created, which have a structure like this. front end was created with npx-create-react-app ...

MyApp
 - FrontEndRepo
 - BackEndRepo

According to NX convention Why does nrwl nx create a separate e2e project for each app?

If I start creating my project with it should be something like this.

MyApp
     - FrontEndRepo
     - FrontEndRepo-e2e
     - BackEndRepo
     - BackEndRepo-e2e

So how can I add those e2e test folders to existing repo?

nrwl-nx cypress reactjs
2 Answers

Use Nx to generate it for you:

npx nx generate @nrwl/cypress:cypress-project FrontEndRepo-e2e --project=FrontEndRepo

user_1933470

The simplest is to just create a project structure in each -e2e folder and install Cypress in both places.

To run front-end or back-end tests from the root, add two scripts in package.json, changing the config file reference in each one.

The cypress.config.js in each -e2e folder is specific to the requirements of that project, e.g API url etc.

{
  ...
  "scripts": {
    ...
    "test:fe": "cypress open --config-file FrontEndRepo-e2e/cypress.config.js",
    "test:be": "cypress open --config-file BackEndRepo-e2e/cypress.config.js",
user_169977070
Related