Angular-CLI with Jasmine unit tests, Chai types conflict

[matusbielik]

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

[M-jerez]

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: #1087 (comment).
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

[Nicoss54]

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

[diminutivesloop]

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

[Badisi]

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

[szandra-homonnai]

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

[esteban-gs]

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

[kurushimi0]

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"

[mmonteiroc]

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

[Chuckv01]

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

[jhpetersen]

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

[TimChinenov]

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 #1087 seemed to work

[Chuckv01]

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

[LucasLopesr]

same problem

[stbth01]

found an answer for me in another thread just sharing here: #22059 (comment)

[Chuckv01]

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

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

[cami-dev]

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

[patricio-ezequiel-hondagneu-roig]

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!

[ericis]

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

[RobinBomkamp]

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

[lgf-roverbytekok]

My configuration:

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

[gersta]

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

[benniaminn]

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

[klofi]

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

[jordanpowell88]

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

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

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

[jordanpowell88]

@maccurt are you using Nx?

[jordanpowell88]

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

Yes you should be able to do that this way

[maccurt]

@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

[maccurt]

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

[udhayakumarcp]

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

Thanks for your comment. But this is not working for me.

[szykov]

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.

[kurushimi0]

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

[Badisi]

I switched to webdriver.io because they provide the exact same solution out of the box.
Their project are generated in a separated folder with its own tsconfig.json and everything just "works".

This.. and also because they are simply reactively effective.

[szykov]

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

[mmcgee-aya]

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!

[jordanpowell88]

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.

[kurushimi0]

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.

[stephanietuerk]

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";

@kurushimi0 Were you able to get this to work with Component testing? I'm having difficulty getting the chained mount command to be recognized. Tried the approach shown here: bahmutov/local-cypress#43, i.e. removing the global declaration and instead doing

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

But mount still wasn't recognized in my .cy.ts component test file.

[kurushimi0]

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

[bahmutov]

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

[stephanietuerk]

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

[maccurt]

Ok, I did the following and did work, now when I change the test I get a message that says: No commands were issued in this test, i have to refresh the whole browser for it work. I wil keep trying to get it to work.. THIS IS VERY FRUSTRATING, but I know these things happen, I really want to use this, but my boss is not going to let me install this, if it will be hassle. I WANT TO USE THIS BADLY!!

import { beforeEach, cy, describe, it } from "local-cypress";
import { IncomeStatmentComponent } from "src/app/income-statment/income-statment.component";
import { CommonModule } from "@angular/common";
import '../support/my-commands';

describe('income statement', () => {

beforeEach(() => {
    cy.mount(IncomeStatmentComponent, {
        imports: [CommonModule]
    })
});

it('', () => {

    cy.getDataTestId('income-statement').should('exist');
});

});

[maccurt]

Is it possible, that I can create a cypress project that is seperate from my Angular project and then use the cypress.config.js file to point it ot my angular project and thus not have these conflicts. I am trying to go down that route, but it says it can't find my angular.json file,

Is this the proper way to find the angular.jsonfile? you change root or the source root ?

[rogacoder]

Hi.
I needed Component testing and I also wanted to keep the Cypress component test (cy.ts) file inside the component folder.

What worked for me was:

Exclude the test files in tsconfig.json >>> "exclude": [ "src/**/*.spec.ts" ]
Include the test files in tsconfig.spec.json >>> "include": [ "src/**/*.spec.ts" ]

Jasmine Types now happy in VScode and Cypress Component testing working too

[spenoir]

With @rogacoder solution I finally figured it out, thanks. Remember to add exclude: [] to spec tsconfig too. All other solutions didn't work for me. Just a simple `"include": ["**/*.ts"] in cypress/tsconfig required