Cypress typings not recognized. Cannot find name 'cy'.

[gijsroge]

Version

3.9.1

Reproduction link

https://github.com/gijsroge/typescript-vue-cli-cypress-typings

Environment info

 System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.9.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.9.0
    @vue/cli-plugin-babel: ^3.9.0 => 3.9.0
    @vue/cli-plugin-e2e-cypress: ^3.9.0 => 3.9.0
    @vue/cli-plugin-eslint: ^3.9.0 => 3.9.1
    @vue/cli-plugin-pwa: ^3.9.0 => 3.9.0
    @vue/cli-plugin-typescript: ^3.9.0 => 3.9.0
    @vue/cli-plugin-unit-mocha: ^3.9.0 => 3.9.0
    @vue/cli-service: ^3.9.0 => 3.9.0
    @vue/cli-shared-utils:  3.9.0
    @vue/component-compiler-utils:  2.6.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    portal-vue: ^2.1.4 => 2.1.5
    svg-to-vue-component: ^0.3.8 => 0.3.8
    typescript: ^3.4.3 => 3.5.2
    vue: ^2.6.10 => 2.6.10
    vue-class-component: ^7.0.2 => 7.1.0
    vue-cli-plugin-editorconfig: ^0.2.1 => 0.2.1
    vue-click-outside: ^1.0.7 => 1.0.7
    vue-content-loader: ^0.2.1 => 0.2.2
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-global-events: ^1.1.2 => 1.1.2
    vue-headful: ^2.0.1 => 2.0.1
    vue-hot-reload-api:  2.3.3
    vue-intersect: ^1.1.3 => 1.1.3
    vue-loader:  15.7.0
    vue-loading-spinner: ^1.0.11 => 1.0.11
    vue-mq: ^1.0.1 => 1.0.1
    vue-property-decorator: ^8.1.0 => 8.2.1
    vue-router: ^3.0.3 => 3.0.7
    vue-scrollto: ^2.15.0 => 2.15.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.0.1 => 3.1.1
    vuex-mock-store: ^0.0.7 => 0.0.7
    vuex-module-decorators: ^0.9.8 => 0.9.9
    vuex-router-sync: ^5.0.0 => 5.0.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. yarn
2. yarn serve

What is expected?

Should compile without errors.

What is actually happening?

Compiles with errors.

ERROR in /Users/gijsroge/sites/typescript-vue-cli-typings/tests/e2e/specs/test.ts
5:5 Cannot find name 'cy'.
    3 | describe("My First Test", () => {
    4 |   it("Visits the app root url", () => {
  > 5 |     cy.visit("/");
      |     ^
    6 |     cy.contains("h1", "Welcome to Your Vue.js   TypeScript App");
    7 |   });
    8 | });
ERROR in /Users/gijsroge/sites/typescript-vue-cli-typings/tests/e2e/specs/test.ts
6:5 Cannot find name 'cy'.
    4 |   it("Visits the app root url", () => {
    5 |     cy.visit("/");
  > 6 |     cy.contains("h1", "Welcome to Your Vue.js   TypeScript App");
      |     ^
    7 |   });
    8 | });`

---

This might just be a Cypress related issue, I'm honestly not sure.

I followed the Typescript guide on Cypress.io -> https://docs.cypress.io/guides/tooling/typescript-support.html#Transpiling-TypeScript-test-files
This might also be useful: cypress-io/cypress#1152

[haoqunjiang]

You need to either exclude tests/e2e in the root tsconfig.json or add "types": ["cypress"] to it, because it's the default tsconfig that's used when running yarn serve.

Also please note we don't ship TS support for cypress by default. Your setup is not complete. You'll need a webpack preprocessor config and should enable it in plugin.js. See https://github.com/cypress-io/cypress-and-jest-typescript-example/blob/master/cypress/plugins/cy-ts-preprocessor.js and https://github.com/cypress-io/cypress-and-jest-typescript-example/blob/master/cypress/plugins/index.js

[phoenixeliot]

@sodatea Those links are broken now; where can I find them?

[haoqunjiang]

If you are using Cypress 3, the permanent link for the example is here: https://github.com/cypress-io/cypress-and-jest-typescript-example/tree/cdc24ff6595190790b6bc2c973a084efe1c11de7/cypress/plugins

If you are using Cypress 4.4+, TypeScript test files are supported without using special preprocessors plugins, so just ignore the linked example and read Cypress's official documentation https://docs.cypress.io/guides/tooling/typescript-support.html

[GersonDantas]

hello, I modified the tsconfig.json file from my project's root folder to ignore the cypress folder. Try this too to test, here it worked.

{ //... tsconfig.json file "exclude": ["src/main/test/cypress"] }

[YUYING-toro]

Hello, as others said, it is tsconfig.json issue. My file is like the below:
{ "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], "types": ["cypress"] }, "include": ["**/*.ts"] }
refer this articlehttps://dzone.com/articles/cypress-typescript-end-to-end-automation-testing-from-scratch

[panditiavinash]

I had the same issue and once i add types in "tsconfig.json", scripts are executing without errors

[niravjadatiya]

I have resolved this with this final config

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

react
just sharing as it might helpful for others

[SparksFlyx3]

Our Cypress files raise hundreds of problems because keywords like "cy", "it" or "expect" are not recognised by TypeScript, e.g. Cannot find name "cy" ts(2304).

After some investiation we noticed that this is caused by a breaking change in Typescript 5.1 with typeRoots (https://www.typescriptlang.org/tsconfig#typeRoots) - we were using Typescript 5.0.4 in our package.json before. VSCode is always using the latest Typescript version (could be set to "Use workspace version" -> https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions) & therefore the breaking change caused these hundreds of problems.

Solution:
As soon as we removed the typeRoots entry from our frontend/tsconfig.json, the problems disappeared.

We now keep the TypeScript version of VSCode & our package.json in sync, to prevent similar problems in the future, with the following VSCode setting:
https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript

[ABDERRAHMANE-OUALI]

if adding the types doesn't solve the erros, just restart the TS server, if you are in vscode open command pallete and choose Typescript: Restart TS Server

and the should solve it

[signor-mike]

Perhaps the worst solution ever: rename file extension from *.cy.ts to *.cy.js
No TypeScript no Typing problems :)

[jonit-dev]

Perhaps the worst solution ever: rename file extension from *.cy.ts to *.cy.js No TypeScript no Typing problems :)

Maybe we should delete the codebase as well

No code, no problems

haha jk

[CrispenGari]

Rather than deleting your code base, you can just open your tsconfig.json in the root folder and add the include option to have a value of ["src", "**/*.ts"]

{
  ....
  "include": ["src", "**/*.ts"]
}

Also make sure that in your cypress folder you have a tsconfig.json that looks similar to this:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

• You might consider restarting your TS Server or Reopening the editor.