Specify tsconfig.json location for Cypress

Question

I'm trying to use Cypress w/ Typescript but Cypress can't find the tsconfig.json file I've created for it. I also have a custom directory structure (because I hate when there's a bunch of config files in the root, so I put them in a config directory).

Project Directory Structure

/
├── package.json
├── configs/
│   ├── cypress.json
├── src/
│   ├── cypress/
│   │   ├── tsconfig.json

Cypress Open command

//  package.json

"scripts": {
    "cypress:open": "cypress open --config-file configs/cypress.json"
},

In the script above, the --config-file flag tells cypress the location of the cypress.json config file, which is AWESOME because I can put that file anywhere I want it. However, now I need to instruct Cypress on where to find it's tsconfig.json file.

/configs/cypress.json (tells Cypress where the cypress/ directory is)

{
  "fixturesFolder": "src/cypress/fixtures",
  "integrationFolder": "src/cypress/integration",
  "pluginsFile": "src/cypress/plugins/index.js",
  "screenshotsFolder": "src/cypress/screenshots",
  "videosFolder": "src/cypress/videos",
  "supportFile": "src/cypress/support/index.js"
}

// is there no option to set tsconfig.json path????

The official documentation says to just put it in the cypress/ directory. According to the docs, that should be at /cypress/tsconfig.json, but in my project it's in /src/cypress/tsconfig.json.

Here's the location I've tried to put the tsconfig.json file:

/src/cypress/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/src/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/cypress/tsconfig.json //Error: "Couldn't find tsconfig.json. tsconfig-paths will be skipped"

/tsconfig.json // Works!! But not where I want this file to live...

How can I instruct Cypress on where to look for the tsconf.json file I want it to use? Is there an option in the cypress.json config file, or a CLI flag I can use????

I don't want to clutter my project root with miscellaneous config files, and I actually have separate tsconfig files for my project and my test suite. It would be great to set the file path explicitly.

Answer 1

While this is not the answer you would like to hear, tsconfig.json marks a directory as the root of a typescript project, just like the package.json marks a directory as the root of a node.js project. These files help tools like IDEs to understand your project.

In my opinion you should only consider moving tsconfig.json when you start to put your package.json in some other folder as well.

See also: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Answer 2

Refer to the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.

It is build with create-react-app and TypeScript. The tsconfig.json used for Cypress is located in the cypress directory.

It is possible you need to configure a root tsconfig.json and extend it from the cypress tsconfig.json as done in the RWA.

// cypress/tsconfig.json
{
  "extends": "../tsconfig.json",
  // ...
}