cypress: Angular-CLI with Jasmine unit tests, Chai types conflict

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

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”

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”] }

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

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

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

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

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

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 😃

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

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

@szykov A few months ago, I actually went down the path of converting thousands of unit tests from Karma/Jasmine to Mocha/Chai, partially to adapt to this issue. Although I was still able to use Karma/Mocha/Chai in combination to run some Angular tests, there are a few things I never figured out how to get working. Even when I used “ng generate config karma” to override all references to Jasmine (and the “kjhtml” reporter), I never found a way to get visual results working in the browser that launches when running “ng test”.

The conflict arises for me by having “cypress” mentioned in any “tsconfig.json” file in the project root folder. Chai’s definition of “describe” and “expect” conflicts with Jasmine’s definition. The solution for me was to place a “tsconfig.json” directly inside the “cypress” folder of the project root, and letting references to “cypress” live within that folder alone. Doing so will prevent VSCode from trying to apply Chai types to “spec.ts” files in any other subfolders.

To the Cypress team: as many others have stated here, your out-of-the-box instructions for using Cypress with Angular break immediately, specifically because of the conflict introduced between Chai and Jasmine – even at the “describe”, “it”, and “expect” level. Since Jasmine comes bundled with Angular even when creating the simplest Angular workspace folders via their CLI, an IDE like VSCode starts showing errors in Angular “spec.ts” files immediately upon the installation of Cypress once Cypress modifies the “tsconfig.json” file in the project root folder. Moving the “cypress” type references into a “tsconfig.json” in the “cypress” folder is the ONLY way I’ve found to get around this issue. I believe you should update your Angular-related installation and documentation accordingly.

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

so to sum up the thread. if you use angular and component testing you have few options.

1. Migrate all your spec tests to use Chai just because Cypress is using it.
2. Forget about unit testing. Weird.
3. Try other frameworks. Storybook for example.

it is a pity.

Can the cypress team tell us if they are working on this or should we just expect this is just what it is? I am not asking to be a jerk, I need to know if we should move on to something else if this is not an issue for the cypress team. I wish you all well!

Thanks for your question @mmcgee-aya and sorry that we haven’t been able to get a clear answer around this. I have personally looked at this several times and haven’t been able to get to the bottom of it. Mock and Jest types conflict and we haven’t been able to come up with a solution at this time. It is on our radar but would love to open it up to the entire community for potential solutions as well. Sorry this isn’t the answer you are looking for but at this time we unfortunately don’t have a good solution identified.

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()

Glad my local-cypress was useful. Too bad there is no roadmap to move the official cypress off using globalsSent from my iPhoneOn Jan 6, 2024, at 15:09, kurushimi0 @.***> wrote: @stephanietuerk Yes, I was able to get it working with both Component testing and E2E testing. In the “cypress/support/component.ts” file, I import Cypress from “local-cypress”. I do that consistently to ensure that any custom commands I add to the “Cypress” object gets added to the namespaced Cypress object from “local-cypress” instead of the default. import { Cypress } from "local-cypress"; import "./commands"; import { mount } from "cypress/angular"; declare global { namespace Cypress { interface Chainable { mount: typeof mount } } } Cypress.Commands.add("mount", mount); That works for me. Again, the important thing seems to be that if you use “local-cypress” you have to import the “Cypress” and “cy” objects from that package consistently.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

Just to let folks know, tonight I installed “local-cypress” as a dev dependency to a project that was running into conflicts with Cypress and Jasmine. That fixed the issue for me. It requires me to add the following line at the top of each “.cy.ts” file:

import { beforeEach, cy, describe, it } from “local-cypress”;

And if “Cypress” is referenced in any of the files created under “/cypress/support” (such as in the “component.ts” file), then you’ll also need to include this line among your other imports at the top of that file:

import { Cypress } from “local-cypress”;

I encountered this solution while reading through another long thread discussing the conflict between Cypress and Jest global types. It would be a really cool thing if the Cypress team could integrate this kind of solution so that we didn’t have to rely on another third-party dependency to fix things. And the documentation on your site that describes the conflict between Cypress and Jest global types should probably be expanded to reference Jasmine, as well, since any Angular project still includes Jasmine out of the box. With the latest release of Cypress, I couldn’t get any of the solutions in this thread (even from my own previous comments) to work.

But installing “local-cypress” as a dev dependency did the trick for me. See their GitHub page for a short readme that describes how to install it. I’m hardly an expert in that library, and I’d much prefer to see their approach taken by the Cypress team itself, since including the explicit imports for “cy”, “describe”, and “it”, etc, is a trivial imposition when the benefit is interoperability with other established unit testing frameworks.

omg, I managed to make it work, I will write below the solution that worked for me. Hope it will for somebody else.

1. Remove all references to the cypress itself and its types. Just install Cypress.
2. Move e2e tests and cypress config to a completely separate folder.
3. New folder should have its own tsconfig with root set true.
4. Exclude this folder in the root tsconfig which upper level. Make sure you have no leaks.
5. If you use component testing then add typings for mount method directly to tests by specifying reference.

typing itself:

import { mount } from 'cypress/angular';

declare global {
	namespace Cypress {
		interface Chainable {
			mount: typeof mount;
		}
	}
}

and in the component test

/// reference types=“…/my-typing-for-this-test.d.ts” />

if it doesn’t work then you have somewhere references to cypress types.

update: Okay, it was a glitch, it’s still failing in some projects.

I ended up declaring Jasmine types super precisely. I added on top of my tests that:

declare function describe(description: string, specDefinitions: () => void): void;
declare function expect<T>(actual: T): jasmine.Matchers<T>;

this file messes out everything: https://github.com/cypress-io/cypress/blob/develop/cli/types/cypress-expect.d.ts

Can the cypress team duplicate this with a brand new install themselves? NG new my-app, then npm install cypress… config the component and e2e testing, you will have this issue out the box, without changing one line of code. I am going to move on…

@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…

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

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

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.”

I do that consistently to ensure that any custom commands I add to the “Cypress” object gets added to the namespaced Cypress object from “local-cypress” instead of the default.

` import { Cypress } from “local-cypress”; import “./commands”; import { mount } from “cypress/angular”;

declare global { namespace Cypress { interface Chainable { mount: typeof mount } } } Cypress.Commands.add(“mount”, mount); `

That works for me. Again, the important thing seems to be that if you use “local-cypress” you have to import the “Cypress” and “cy” objects from that package consistently.

@kurushimi0 Disregard my earlier note here – this worked for me! (Needed to restart tsc) Thank you! (And thank you @bahmutov for this lib!)

@stephanietuerk Yes, I was able to get it working with both Component testing and E2E testing. In the “cypress/support/component.ts” file, I import Cypress from “local-cypress”. I do that consistently to ensure that any custom commands I add to the “Cypress” object gets added to the namespaced Cypress object from “local-cypress” instead of the default.

` import { Cypress } from “local-cypress”; import “./commands”; import { mount } from “cypress/angular”;

declare global { namespace Cypress { interface Chainable { mount: typeof mount } } } Cypress.Commands.add(“mount”, mount); `

That works for me. Again, the important thing seems to be that if you use “local-cypress” you have to import the “Cypress” and “cy” objects from that package consistently.

@maccurt are you using Nx?

All I am doing is following the instructions on your site. I NG NEW my-project and them NPM Install and my test are automatically broke (well they still run, but Visual Studio code shows compiler errors)… all I am doing is this… https://docs.cypress.io/guides/component-testing/angular/quickstart, Nothing else… once you do this it will break your asserts

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" ] }

@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"]
}

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!

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

@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.