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

[sodatea]

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?

[sodatea]

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