CODEWITHSUNDEEP
reactjstypescriptcucumbercypress
Wei
Wei

Reputation: 69

Can't have tsconfig.json in Cypress-cucumber-typescript for React

I have a project with React, Cypress-cucumber-preprocessor, Typescript(output in es5).
When I run the cypress with official example or another example, it has those problems:

TypeScript error: cypress/integration/Google/google.ts(5,3): Error TS2304: Cannot find name 'cy'.

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

If I delete tsconfig.json in React parent folder, it fixed the Syntax Error but it still has TypeScript error.
So it seems like tsconfig.json make this problem, but the project should not without tsconfig.json.

Here is my tsconfig.json

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

Upvotes: 5

Views: 11051

Answers (3)

Gerson Dantas
Gerson Dantas

Reputation: 1363

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"]
}

note: If you are using eslint, you will have to do one more configuration. Because eslint doesn't let us have a TypScrip file inside the project without being treated.

First: Create a file in the project root called tsconfig-eslint.json. It will extend the other tsconfig but ignore the deletion. Put the following content in it:

{
 "extends": "./tsconfig.json",
 "exclude": []
}

Second: modify the parseOptions of the .eslint.json file to point to the newly created file:

{
 //... rest of the settings
 "parserOptions": {
   "project": "./tsconfig-eslint.json"
  },
}

Upvotes: 2

Ahmed Shawky Ahmed
Ahmed Shawky Ahmed

Reputation: 77

You can follow the solution in this link

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

Upvotes: 1

Canonne Gregory
Canonne Gregory

Reputation: 424

for Error TS2304: Cannot find name 'cy'.

you should add on top of your file:

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

Upvotes: 11

Related Questions