cypress

cypress copied to clipboard

Current behavior:

Using Cypress with Typescript in Angular application causes type conflict between Mocha/Chai and Jasmine.

Angular-CLI project uses Jasmine for unit test, but Visual Studio Code intellisense can't recognize Jasmine types, e.g. Property 'toBeTruthy' does not exist on type 'Assertion'..

I've tried every solution I've found but none works. Please investigate and provide the solution, don't close this as a duplicate, as I am aware I am not first with this problem, but no solutions work.

Desired behavior:

Typescript support for both jasmine spec.ts files and Cypress spec.ts files.

Test code to reproduce

Using latest Visual Studio Code:

• npm i -g @angular/cli
• ng new ng-minimal-repo
• cd ng-minimal-repo
• npm i --save-dev cypress
• ./node_modules/.bin/cypress open (to generate example spec files)

after renaming any of the Cypress spec files to .ts file extension and opening the file in VSC, Jasmine unit test spec.ts files use Mocha/Chai types instead of Jasmine types.

Minimal reproduction app

I have also created minimal app where this problem occurs, no need to build, only clone and install:

• git clone https://github.com/matusbielik/ng-cypress-types-problem
• cd ng-cypress-types-problem
• npm i
• then open ./ng-cypress-types-problem/cypress/integration/main.spec.ts in Visual Studio Code.

After this, errors in ./ng-cypress-types-problem/src/app/app.component.spec.ts should be highlighted.

Versions

Visual Studio Code: 1.45.1 AngularCLI: 9.1.7 OS: Ubuntu 18.04 Cypress: 4.7.0

Hi @matusbielik

I had a similar issue. looks like is just a VS code thing as unit tests and e2e are still executing OK.

This is what solved my problem: https://github.com/cypress-io/cypress/issues/1087#issuecomment-552951441.
modify the main tsconfig.json file. (needs to be tsconfig.json, not tsconfig.spec.json or tsconfig.app.json)

{
    "include": [
        "src",
        "node_modules/cypress"
    ],
    "exclude": [
        "node_modules/cypress"
    ]
}

Look slike VS code is reading only tsconfig.json and not tsconfig.spec.json, also only previously included files can be excluded

If your cypress tests are in a specific folder outside your src folder, you can juste exclude them in your tsconfig.json file

{ exclude: ["your_specific_folder"] } 

and all will work as expected

@Nicoss54 Your solution worked for me. When I tried including and excluding "node_modules/cypress" as recommended by @M-jerez the type conflicts went away but then VSCode started complaining about the experimentalDecorators compiler option not being enabled in my Angular component files.

@Nicoss54's solution doesn't work with cypress.

Cypress is using a ./cypress/tsconfig.json which extends from ./tsconfig.json. So excluding ./cypress in the root tsconfig.json results in no files being found at all.

I also tried all the other ways from the previous ticket, but none of them worked or was suitable for my project. So this is my workaround for this problem - which is maybe not ideal, but works for me. But I think some "official" solution would be so much better.

In my root tsconfig.json I exluded cypress:

{
  "exclude": [
    "cypress/**/*.ts"
  ]
}

Based on @Badisi reply on this solution and because VSCode shown an error for cypress's tsconfig, I overrode the exlude part in the ./cypress/tsconfig.json, so my file looks like this now:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": [
      "cypress"
    ]
  },
  "include": [
    "**/*.ts"
  ],
  "exclude": []
}

When the exlude part was not overriden in cypress's tsconfig, I got this error from VSCode when I opened that file:

No inputs were found in config file 'd:/workspace/my-project/cypress/tsconfig.json'. Specified 'include' paths were '["**/*.ts"]' and 'exclude' paths were '["../cypress/**/*.ts"]'.

If you still have the errors, it's a good idea to restart the TS server (F1 -> Typescript: Restart TS server), because sometime it can get stuck, but the restart solves that problem :)

If your cypress tests are in a specific folder outside your src folder, you can juste exclude them in your tsconfig.json file

{ exclude: ["your_specific_folder"] } 

and all will work as expected

^ The only solution that worked

Others have mentioned excluding the contents of your cypress folder, in the tsconfig.json file. But if you use a "cypress.config.ts" file to configure recent versions of Cypress, then you need to exclude that file, too, since VS Code will reference the conflicting types via that file if you don't exclude it. So my own project's tsconfig.json file has these three entries in its "exclude" array to resolve the conflict:

"**/node_modules", "cypress", "cypress.config.ts"

Any update on this issue, we were not experiencing it before V10 of cypress. We upgraded and got the same issue.

Some workarounds here work, but they break other features so cant use them.

As shown above we would expect to have the type from jasmine, but comes from chai Cypress

We're also facing this issue on Ionic/Angular projects using Cypress 10.

I just stumbled upon this issue, setting up a fresh new Ionic 6 / Capacitor project, following the recommendation to migrate from protractor to cypress - and immediately had problems that all jasmine test specs (although still running and working with ng test) are showing typescript errors in VS Code for static methods like expect, as this is only recognized as Chai.assert.

None of the proposed solutions from above worked for me. (ignoring cypress tsconfig.ts just results in the opposite problem, that cypress specs are showing typescript errors).

This is really really annoying, especially because the cypress migration doc states: "Do I have to replace all of my tests with Cypress immediately? Absolutely not. While it might sound ideal to replace Protractor immediately, you can gradually migrate Protractor tests over to Cypress."

Seeing the same issue. Was wondering if there has been any activity on this? Unfortunately, breaking out the cypress tests into a separate project is not an option for us.

None of the existing suggestions here or here https://github.com/cypress-io/cypress/issues/1087 seemed to work

Tagging top contributors on this issue. Any help here guys? This is a blocker for Ionic / Angular projects.

@jennifer-shehane / @chrisbreiding / @brian-mann / @bahmutov / @flotwig

same problem

found an answer for me in another thread just sharing here: https://github.com/cypress-io/cypress/issues/22059#issuecomment-1148963931

Adding this in tsconfig.json fixed it for me on an Ionic/Angular project:

  "exclude": [
    "./cypress.config.ts"
  ],

Is there no update on a fix for this in either jasmine or cypress? Feels bad to add excludes that should not be necessary.

This worked for us when added to tsconfig.json in root running cypress 10.6.0 on Angular 14.2.1 { "include": ["src", "./cypress.config.ts"], "exclude": ["./cypress.config.ts"] }

Is there no update on a fix for this in either jasmine or cypress? Feels bad to add excludes that should not be necessary.

This worked for us when added to tsconfig.json in root running cypress 10.6.0 on Angular 14.2.1 { "include": ["src", "./cypress.config.ts"], "exclude": ["./cypress.config.ts"] }

This worked for me, running Angular 15.0.0 and Cypress 11.2.0.

I still can't colocate the x.component.cy.ts component testing files with their corresponding x.component.ts files because this config excludes the Cypress types from the /src folder, but it works like a charm when placing them in the /cypress folder.

Thanks for sharing!

For my project, VS Code was complaining that expect(...).toBeTruthy() did not exist. I tried a number of suggestions above, but worked out that the minimum that was required for my setup was the following:

{
  ...,
  "exclude": ["cypress/**/*.*", "cypress.config.ts"]`
}

No "include" was necessary. Although the "./cypress/cypress.config.ts" file exists under the "cypress/" directory and should have been ignored, adding the file name to the configuration's exclude list was necessary and key as "cypress/**/." alone was not working. Similarly, "cypress.config.ts" alone was not working either.

• Angular 15
• Ionic 6.4
• Cypress 11.2
• Jasmin 4.3

Hey there, any updates? Having the same problem. The angular cypress schematics are also having the problem. see https://github.com/cypress-io/cypress/tree/develop/npm/cypress-schematic

My configuration:

WebStorm: 2022.2.3 AngularCLI: 15.0.5 OS: macOS Catalina 10.15.7 Cypress: 12.5.1

Here is what I did (Angular, Jasmine, Cypress):

• cypress: 12.6.0
• jasmine-core: 4.3.0
• @types/jasmine: 4.0.0

In my tsconfig.json I added this:

"include": ["src/**/*.ts"]

I then created a tsconfig.json file under cypress/ with the following content, which I basically took from the cypress webpage:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Then I restarted the TS server in VS code and tried to run both test kinds: ng test and npx cypress open

Both work and all IDEA errors are gone

@gersta your solution worked for me. I removed some lines from cypress/tsconfig.json and left it like below and it still works.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Tried with a brand new Angular project created with latest version of all tools and this issue still exists. None of the fixes above worked for me.

Repro using @angular/cli 15.2.2:

ng new cypressTest
cd cypressTest
ng add @cypress/schematic --e2e --component

Open project in WebStorm or VS Code (same repro in both) and open automatically created file app.component.spec.ts. Jasmine functions like toBeTruthy report Property 'toBeTruthy' does not exist on type 'Assertion'. error.

Versions:

@angular/cli 15.2.2
@cypress 12.7.0
@cypress/schematic 2.5.0
@types/jasmine 4.3.1

in case anyone is wondering for a jhipster application i solved with the following, in the main tsconfig.json file:

  "include": [
      "src"
  ],
  "exclude": [
      "src/test/javascript/cypress"
  ]

Ok this morning, I installed a brand new Angular project and followed the directions from cypress. Without doing anything my project my *.spect.ts files are already broke.

"typescript": "~5.1.3" "@angular/core": "^16.1.0", "cypress": "^12.17.1",

It is hard for me to imagine that a testing framework is breaking another testing framework, it is almost like the testing framework developers did not TEST. SMH

This solution here breaks cypress, but fixes the .toBeTruthy()

I'm having component tests in both Jasmine and Cypress, and e2e tests in Cypress. With the following changes, I was able to make everything run:

I've put the cypress.config.ts file inside the cypress folder, and all my cypress-component tests are bundled there as well.

in tsconfig.json, add the following block: "exclude": [ "cypress", ]

in tsconfig.spec.json, add the following block: "include": [ "src/polyfills.ts", "src/test.ts", "src/**/*.spec.ts", "src/**/*.d.ts" ], "exclude": [ "node_modules" ]

in cypress/tsconfig.json: { "extends": "../tsconfig.json", "include": ["**/*.ts", "../cypress"], "exclude": [], "compilerOptions": { "sourceMap": false, "types": ["cypress"] }, "types": [ "cypress" ] }

@lieven-p I tried your way, did not work.. I will make sure I got it right again, I started a BRAND NEW angular app (several times) installed Cypress E2E and Component testing and right away my test broke. So they really need to figure this out on their end, ALSO the instructions for installing Angular Component test, maybe does not mention that some people add a tsconfig.json under their cypress folder, while other instructions on the site do.. My situation is I did add it. This sucks, because I want to use this, but not at the expense of my unit test not compiling correctly, albeit they do still run, just a minor annoyance

@maccurt Component Testing for Angular generates a tsconfig file on the fly and saves it to a temp dir on your local machine. The cypress/tsconfig.json shouldn't have any affect on this. If you want to support using your own tsconfig you will need to do so with the Options API

@maccurt Component Testing for Angular generates a tsconfig file on the fly and saves it to a temp dir on your local machine. The cypress/tsconfig.json shouldn't have any affect on this. If you want to support using your own tsconfig you will need to do so with the Options API

Oh, let me look at that. All I want to do is install Cypress and my unit test not get jacked up.. THAT IS THE BARE MINIMUM I ASK.. LOL.. I am going to solve this issue for me and my team, because I want to use Component testing. AT THE END OF THE DAY, you should be able to install this and everything work, now with said I understand these things happens, I break stuff all day at work.. LOL, I am committed to figuring this out for a new install, that should work at the MINIMUM..

@maccurt Component Testing for Angular generates a tsconfig file on the fly and saves it to a temp dir on your local machine. The cypress/tsconfig.json shouldn't have any affect on this. If you want to support using your own tsconfig you will need to do so with the Options API

Could I use this to option to NOT install cypress into my Angular project and keep them separate?