Angular-CLI with Jasmine unit tests, Chai types conflict

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

Issue Analytics

State:
Created 3 years ago
Reactions:30
Comments:18

Top GitHub Comments

28reactions

M-jerezcommented, Oct 27, 2020

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

12reactions

Nicoss54commented, Jan 20, 2021

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

Top Results From Across the Web

VS-Code wrong Types for Unit-Tests (Mocha&Chai instead of ...

Possible solution could be create tsconfig. json in nested folder instead of tsconfig. spec. json file and specify 'types' field in it.

Angular 9 Testing: Why We Chose Jasmine Over Jest and ...

Angular CLI comes by default with Jasmine and Karma as the test runner. It generates test files at component creation, collects unit tests,...

Cypress and Jest `expect` functions conflict in IDEA, tests ...

I have an Angular 12 project generated with @nrwl/nx . You can find its source on GitHub for issue ... Does it even...

TypeScript - Cypress Documentation

This will address instances where the project also uses @types/chai or @types/jquery . Since Chai and jQuery are namespaces (globals), incompatible versions ...

End-to-end testing with Cypress - Testing Angular

We have successfully written unit and integration tests using Karma, Jasmine and Angular's own testing tools. These precise tests give ...