CODEWITHSUNDEEP
reactjstypescripttestingvisual-studio-codecypress
Alecell
Alecell

Reputation: 608

typescript autocomplete for mocha, chai and cy outside cypress folder

I'm trying to config cypress and typescript to allow run tests on the same folder of my project instead of the default integrations folder.

I made it works running the tests, but I just cannot find a way to allow the mocha, chai and cy autocomplete work on the test file, it keep trying to get the default jest config from CRA.

I tried to remove jest ejecting the project but it don't work, the only thing I got was the describe, it, cy and expect to be like any.

The stranger thing was that sometimes, I didn't know why, it gets the right config, after so much debugging I realize that if I change something inside /cypress/plugins or /cypress/support the autocomplete start to work, but it's lost when I restart vscode.

With that behavior I start to think that vscode initially don't get the tsconfig.json inside cypress folder. Since nothing makes reference to that file/folder it makes sense, make even more sense knowing that when I save something inside that two folders above the autocomplete start to work.

But I still don't know what to do to allow autocomplete without needing to change something inside /cypress every session. Does someone know how can I make this work?

I add that config on cypress.json

{
  "integrationFolder": "./src",
  "testFiles": [
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

my root tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "**/*.spec.ts",
    "**/*.spec.tsx"
  ]
}

and the cypress tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "noEmit": false
  },
  "include": [
    "../node_modules/cypress",
    "../src/**/*.spec.ts",
    "../src/**/*.spec.tsx"
  ],
  "exclude": []
}

Upvotes: 1

Views: 1961

Answers (1)

Alecell
Alecell

Reputation: 608

After so many tries I figure out a way good approach. As I described here my biggest mistake was add the exclude to the root tsconfig.json, removing them I can create a tsconfig.cypress.json on the project root alongside tsconfig.json with that work as expected.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src",
    "types": ["cypress"],
  },
  "include": [
    "src"
  ]
}

tsconfig.cypress.json

{
  "extends": "tsconfig.json",
  "compilerOptions": {
    "isolatedModules": false,
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "noEmit": false,
    "baseUrl": "./node_modules"
  },
  "include": [
    "./node_modules/cypress",
    "src/**/*.spec.ts",
    "src/**/*.spec.tsx"
  ],
}

I have only one point that I cant figure out that was the need of "types": ["cypress"] on the root tsconfig, if I define it on tsconfig.cypress.json the typing don't work, however that's a minimal detail.

Upvotes: 2

Related Questions