升级TypeScript 5.2.2后Cypress 13.3.0测试运行失败求助

问题说明 #

升级TypeScript至5.2.2版本后，执行Cypress 13.3.0的e2e测试（命令cypress run --browser chrome --headless或cypress open）时触发编译错误，提示Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'，但项目根目录的tsconfig.json中已正确配置这两个选项。

相关配置文件 #

项目根目录tsconfig.json #

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "removeComments": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "target": "esnext",
    "jsx": "react",
    "noEmitOnError": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "incremental": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "downlevelIteration": true,
    "resolveJsonModule": true
  },
  "include": ["./src/scripts/**/*"]
}

cypress.config.ts #

import { defineConfig } from 'cypress';

export default defineConfig({
    e2e: {
        baseUrl: 'http://localhost:5020',
        specPattern: 'cypress/e2e/**/*.e2e-spec.ts',
    },
});

完整报错信息 #

> cypress run --browser chrome --headless


DevTools listening on ws://127.0.0.1:55721/devtools/browser/14f8fba2-9991-4a01-97ae-aab68abe63ce
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
Your configFile is invalid: <path_to_repo_here>/cypress.config.ts

It threw an error when required, check the stack trace below:

TSError: ⨯ Unable to compile TypeScript:
error TS5110: Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.

    at createTSError (/Users/<user>/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:311:16)
    at reportTSError (/Users/<user>/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:314:23)
(...rest of stack here)

解决方法 #

• 为Cypress单独配置tsconfig：在cypress目录下创建tsconfig.json，继承项目根配置并确保覆盖相关选项，同时包含Cypress所有文件

  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "module": "NodeNext",
      "moduleResolution": "NodeNext"
    },
    "include": ["**/*"]
  }
  

• 扩展项目根tsconfig的include范围：将Cypress相关文件加入到项目根tsconfig的include数组中，确保TypeScript编译时覆盖Cypress配置和测试文件

  {
    "include": ["./src/scripts/**/*", "./cypress/**/*"]
  }
  

• 显式指定Cypress使用的tsconfig路径：在cypress.config.ts中添加typescript配置项，明确指向项目根的tsconfig文件

  import { defineConfig } from 'cypress';
  
  export default defineConfig({
      e2e: {
          baseUrl: 'http://localhost:5020',
          specPattern: 'cypress/e2e/**/*.e2e-spec.ts',
      },
      typescript: {
          tsconfig: './tsconfig.json'
      }
  });
  

• 升级Cypress版本：Cypress 13.3.0与TypeScript 5.2.x可能存在兼容性问题，升级到最新稳定版（如13.6.x及以上）可修复此类bug

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