Cypress继承根tsconfig时报File is not under 'rootDir'错误如何解决

问题根因 #

• 你在cypress目录的tsconfig中继承了根目录的tsconfig配置，根目录tsconfig的compilerOptions指定了"rootDir": "src"，该配置要求所有被TS识别的源文件必须放在src目录下
• Cypress的测试文件存放在cypress目录，不在src范围内，因此触发TS6059错误

调整方案 #

无需修改根目录的主tsconfig，仅调整cypress/tsconfig.json，在compilerOptions中覆盖继承自父配置的rootDir参数即可，调整后的完整配置如下：

{
  "extends": "../tsconfig.json",
  "include": ["./**/*.ts", "../src/**/*.ts"],
  "exclude": [],
  "compilerOptions": {
    "types": ["cypress"],
    "lib": ["es2015", "dom"],
    "isolatedModules": false,
    "composite": true,
    "rootDir": "../",
    "baseUrl": "../"
  }
}

配置说明 #

• rootDir设为../后，将整个frontend根目录作为TS的源文件根目录，cypress和src目录都被纳入范围，不再触发路径不匹配错误
• include新增../src/**/*.ts规则，保证Cypress的TS文件可以正常识别并引入src下的业务代码文件
• baseUrl设为../后，可以简化引入路径，比如在Cypress测试文件中直接用import xxx from 'src/xxx'引入业务代码，无需写多层相对路径

内容的提问来源于stack exchange，提问作者Anastasion