Adding @cypress/schematic to Angular workspace results in misconfiguration

[webberig]

Current behavior

Consider an Angular workspace containing 2 projects of type "Application" and 2 projects of type "Library". The project was created in previous versions of Angular that don't have Cypress by default and you want to replace Protractor.

When you run ng add @cypress/schematic, it creates files in every project (including the library projects). It also creates an empty cypress.json file in root.

The schematic also adapts angular.json but doesn't add a reference to the cypress.json file (https://github.com/cypress-io/cypress/tree/master/npm/cypress-schematic#specifying-a-custom-cypressjson-config-file)

When you run ng e2e app1 it starts Cypress but the default spec.js is not found. In fact, cypress is run without a reference to the proper cypress.json file of the given project "app1".

Desired behavior

1. The root cypress.json file should not be added, as it serves no purpose.

2. I think it should not add files to projects of type "library", since those projects don't have a serve action and are unable to be run in a browser directly. Cypress should only be added to projects of type "application" which do have a "serve" action

3. angular.json configuration should have a configFile property for the corresponding file in the project

Test code to reproduce

You can easily create the scenario using the ng CLI:

npx @angular/cli@10 new workspace --create-application
npx @angular/cli@10 g library lib1
npx @angular/cli@10 g library lib2
npx @angular/cli@10 g application app1
npx @angular/cli@10 g application app2
ng add @cypress/schematic

Cypress Version

9.4.1

Other

No response

[JessicaSachs]

We don't have component testing support for Angular. This is a user issue with Angular E2E.

[220usamaahmed]

I am having the same issue with cypress ng e2e app1. The tests inside app1 are not found. Instead it tries to run tests in the root of the workspace. Any way to only run the tests which correspond to app1?

[yohny]

Same issue here. I used @cypress/schematics (v 2.4.0) on a multiproject Angular workspace (1 library and 2 applications). I only added e2e testing when asked by schematics, no component testing. The result was that e2e configuration was also added to the library project, which makes no sense, as library can not be launched on its own. This was an easy fix however, as I simply deleted generated files from library project and the corresponding generated section from angular.json. There is still an issue remaining - when I run ng e2e my-app it stated that it was new, non-configured project - the reason being missing reference to project cypress.config.js file in generated angular.json section for e2e. The reference to the cypress config is present in genereted angular.json sections for cypress-run and cypress-open. When I added the reference to projects cypress.config.js also to e2e section it now ends with the below screen (same as ng run my-app:cypress-open): so it seems that there is still something missing to be able to run the e2e tests, as now the Continue button is disabled (and also it seems that the configuration on screenshot points to global setup files one not project specific ones).

Additional info: The angular.json section looks like this now:

"cypress-run": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "my-app:serve",
    "configFile": "projects/my-app/cypress.config.js"
  },
  "configurations": {
    "production": {
      "devServerTarget": "my-app:serve:production"
    }
  }
},
"cypress-open": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "watch": true,
    "headless": false,
    "configFile": "projects/my-app/cypress.config.js"
  }
},
"e2e": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "my-app:serve",
    "watch": true,
    "headless": false,
    "configFile": "projects/my-app/cypress.config.js" // added manually by me
  },
  "configurations": {
    "production": {
      "devServerTarget": "my-app:serve:production"
    }
  }

there are few things to notice:

• cypress config files are .ts in reality, yet in angular.json we are pointing to .js files, is this intentional (aka. referencing already compiled js)?
• mising devServerTarget in cypress-open section, so I guess that one would not work even if Continue was fixed as it does not launch the target app for e2e testing

[yohny]

update: I managed to move further by changing the extensions of referenced config files to .ts, but then no e2e tests were found as the used specs search pattern cypress/e2e/**/*.cy.{js,jsx,ts,tsx} is pointing to global cypress directory instead of project specific one as seen here:

I fixed that by adding specPattern into projects/my-app/cypres.config.ts so now it looks like this:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    supportFile: false,
    specPattern: 'projects/my-app/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}', // <--- fixed spec pattern
  },
});

and now the initial schematics generated e2e test is found, but when I try to run it it fails with error:

Error: Webpack Compilation Error
C:\Users\<redacted>\source\repos\sample-repo\projects\my-app\cypress\tsconfig.json
[tsl] ERROR
      TS5083: Cannot read file 'C:/Users/<redacted>/source/repos/sample-repo/projects/my-app/tsconfig.json'.
    at Watching.handle [as handler] ....

whick makes sense, as the schamatics generated cypress tsconfig actually resides in additional cypress folder, aka. projects/my-app/cypress/tsconfig.json (which is a correct location as it should be in root of typescript project, which in this case is projects/my-app/cypress)

it also seems that globally (in root) generated cypress.config.ts and cypress/* should not be needed in multiproject workspace setup, as all thosse things are also generated within projects/my-app/, altough when looking at Resolved configuration in cypress UI I see that downloadsFolder, fixturesFolder, screenshotsFolder, videosFolder all are pointing inside root cypress folder instead of project specific one

[achrysanthakopoulou]

Any updates ? I have the same problem.

[duluca]

Bump. This still seems to be an issue.

My repo here https://github.com/duluca/local-weather-app has this issue.

[sdhoek]

I found out that if you set the project path within angular.json, everything will work.

Note: sometimes you also have to edit the tsconfig.json within the cypress/ folder to an existing tsconfig.json file.

"e2e": {
          "builder": "@cypress/schematic:cypress",
          "options": {
            "devServerTarget": "my_project:serve",
            "watch": true,
            "headless": false,
            "project": "projects/my_project"   // ===> Add this line
          },
          "configurations": {
            "production": {
              "devServerTarget": "my_project:serve:production"
            }
          }
}

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.