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.

user_518130 · Answer

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",
  // ...
}

user_7197182 · Answer

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

user_15113491 · Answer

Try if this commands works:

//CD to the space you want your .tsconfig 
    cd project_config  
     
  // Create .tsconfig   
     tsc --init  
    
  // Specify were you want to run your tsconfig file from
     tsc -p /path/to/folder/with/tsconfig

user_2556034 · Answer

This can be achieved without a root level tsconfig. The idea is that we can cd into our test folder before running the open command:

With the below file structure your test command would look something like this:

cd ./src/cypress && cypress open --config-file ../../configs/cypress.json

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

Just be sure to update your support paths etc in the cypress.json, they will now be relative to src/cypress

Specify tsconfig.json location for Cypress

4 Answers