Remix项目配置Cypress/ESLint组件测试遇解析错误求助

问题描述 #

我正在基于Remix搭建新项目，尝试配置Cypress/ESLint进行组件测试。TestComponent.cy.ts文件代码如下：

describe('TestComponent.cy.ts', () => {
  it('playground', () => {
    // cy.mount()
  })
})

但文件中的describe函数抛出ESLint解析错误：

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/component/TestComponent.cy.ts` using `parserOptions.project`: <tsconfigRootDir>/../../../../../../users/tduke/desktop/dev/blog/cypress/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project

尝试重新配置tsconfig.json和.eslintrc.js后问题仍未解决，当前配置文件内容如下：

当前tsconfig.json #

{
  "exclude": ["./cypress", "./cypress.config.ts"],
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "./cypress/component/*.cy.ts", "./cypress/**/*.cy.ts", 
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "types": ["vitest/globals"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "skipLibCheck": true,

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

当前.eslintrc.js #

/** @type {import('@types/eslint').Linter.BaseConfig} */
module.exports = {
  extends: [
    "@remix-run/eslint-config",
    "@remix-run/eslint-config/node",
    "@remix-run/eslint-config/jest-testing-library",
    "prettier",
  ],
  env: {
    "cypress/globals": true,
  },
  parserOptions: {
    project: './tsconfig.json'
  },
  plugins: ["cypress"],
  // We're using vitest which has a very similar API to jest
  // (so the linting plugins work nicely), but we have to
  // set the jest version explicitly.
  settings: {
    jest: {
      version: 28,
    },
  },
};

解决方案 #

1. 修复主TSConfig的冲突配置 #

你的tsconfig.json中同时存在exclude: ["./cypress"]和include: ["./cypress/**/*.cy.ts"]，exclude规则优先级更高，导致Cypress测试文件被排除在TSConfig之外，ESLint无法识别文件类型。

修改tsconfig.json，移除exclude中的./cypress，仅保留不需要编译的Cypress配置文件：

{
  "exclude": ["./cypress.config.ts"],
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  // 其他compilerOptions保持不变
}

或者更精准地指定包含范围，避免冗余：

{
  "exclude": ["./cypress.config.ts"],
  "include": [
    "remix.env.d.ts", 
    "app/**/*.ts", 
    "app/**/*.tsx",
    "cypress/**/*.cy.ts",
    "cypress/**/*.cy.tsx"
  ],
  // 其他compilerOptions保持不变
}

2. 为Cypress单独创建TSConfig（推荐） #

Remix主TSConfig针对应用代码设计，为Cypress单独配置TSConfig可避免类型冲突，步骤如下：

• 在cypress目录下新建tsconfig.json：

{
  "extends": "../tsconfig.json",
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"],
    "isolatedModules": false // Cypress不需要该配置
  }
}

• 修改.eslintrc.js，为不同目录指定对应的TSConfig：

module.exports = {
  extends: [
    "@remix-run/eslint-config",
    "@remix-run/eslint-config/node",
    "@remix-run/eslint-config/jest-testing-library",
    "prettier",
  ],
  env: {
    "cypress/globals": true,
  },
  plugins: ["cypress"],
  settings: {
    jest: {
      version: 28,
    },
  },
  // 为不同目录配置独立的解析规则
  overrides: [
    {
      files: ["cypress/**/*.cy.ts", "cypress/**/*.cy.tsx"],
      parserOptions: {
        project: "./cypress/tsconfig.json"
      }
    },
    {
      files: ["app/**/*.ts", "app/**/*.tsx"],
      parserOptions: {
        project: "./tsconfig.json"
      }
    }
  ]
};

3. 移除主TSConfig中的Vitest类型（可选） #

主TSConfig的types中包含vitest/globals，可能与Cypress全局变量冲突，建议仅在Vitest测试的单独配置中添加该类型，或直接从主配置中移除。

内容的提问来源于stack exchange，提问作者T. Duke