CODEWITHSUNDEEP
visual-studio-codejestjsintellisensecypress
coder
coder

Reputation: 716

VS Code Jest and Cypress intellisense doesn't work properly with Chai

I am using Jest as unit testing framework and bellow intellisense is correct:

enter image description here

However, when I install Cypress "cypress": "^3.2.0", the same code now displaying error Property 'toMatch' does not exist on type 'Assertion'. Did you mean 'match'?. The reason for that IMO is Cypress install typings under node_modules/cypress/types/chai/index.d.ts and VS Code is picking them for intellisense. Both Jest and Cypress have dependency on Chai assertion library. Intellisense after installing Cypress:

enter image description here

Is there a way to tell VS Code which Chai intellisense to use in specific folder? Or is there some way to specify it in jsconfig.json file?

Upvotes: 7

Views: 6125

Answers (4)

rj3005
rj3005

Reputation: 181

Found this answer on GitHub https://github.com/cypress-io/cypress/issues/22059#issuecomment-1148921141

Adding ./cypress.config.ts to exclude in my tsconfig.json worked for me

Upvotes: 0

Kaesepowl
Kaesepowl

Reputation: 111

Had the same problem with cypress and jest.

I solved it by creating two jsconfig.json

cypress/jsconfig.json

{
  "typeAcquisition": { "include": ["cypress"] }
}

and then one for my src folder

src/jsconfig.json

{
  "typeAcquisition": { "include": ["jest"] }
}

Restarted VSCode and it worked as expected

Upvotes: 11

Paul Melero
Paul Melero

Reputation: 1395

Facing this issue myself too.

Usually I can type the assertions by heart, but when you really need autocompletion, adding 

/// <reference types="jest" />

(A triple-slash directive) On the top of your test suite file will give you the correct jest types.

Note: you need to have @types/jest installed too!

VS Code dialog with proper type reference

Upvotes: 10

coder
coder

Reputation: 716

The solution was to create aliases for those global variables exposed in Jest and decorate those variables with @type in JSDoc. So, I created a file jestGlobals.js in same directory where my tests are.

jestGlobals.js file: (I included only one global for sake of simplicity, but you would do the same thing for all global variables):

/** @type {jest.Expect} */
// @ts-ignore
let expect = global.expect

export { expect }

Then I just import those variables in my *.spec.js files:

import { expect } from './jestGlobals'

Now, when I use this aliases, I got correct intellisense like this: enter image description here

Upvotes: 4

Related Questions