vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

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

Closed gijsroge closed 5 years ago

gijsroge commented 5 years ago

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: https://github.com/cypress-io/cypress/issues/1152

haoqunjiang commented 5 years ago

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 commented 3 years ago

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

haoqunjiang commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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

niravjadatiya commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Screenshot 2023-08-14 at 18 25 06

and the should solve it

signor-mike commented 1 year ago

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

jonit-dev commented 11 months ago

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 commented 8 months ago

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"]
}
heyaibek commented 5 months ago

Adding types reference to cypress resolved this issue for me.

Solution 1: Add the following to the top of spec files

/// <reference types="cypress" />
...

Solution 2: Add the following to the tsconfig.json

{
  "compilerOptions": {
    "types": [
      "cypress",
    ]
  }
}