NX单仓库Cypress组件测试：配置报错与路径异常问题排查

1. 偶发报错“加载cypress.config.js失败”（仅存在cypress.config.ts） #

• 在项目的project.json中，找到Cypress测试的目标配置，明确指定configFile参数为cypress.config.ts，强制Cypress读取TypeScript配置文件：

  {
    "targets": {
      "component-test": {
        "executor": "@nrwl/cypress:cypress",
        "options": {
          "configFile": "apps/your-app/cypress.config.ts",
          // 其他配置...
        }
      }
    }
  }
  

• 执行nx reset清除NX缓存，偶发问题大概率和缓存残留有关，清除后重新启动测试。

2. component-index.html路径重复拼接导致找不到文件 #

• 检查cypress.config.ts的component配置块，确认indexHtmlFile没有手动重复拼接路径。如果使用NX预设的路径，直接引用NX提供的变量或相对路径：

  import { defineConfig } from 'cypress';
  import { nxComponentTestingPreset } from '@nrwl/cypress/plugins/component-testing';
  
  export default defineConfig({
    component: {
      ...nxComponentTestingPreset(__dirname),
      // 不要手动拼接indexHtmlFile，使用预设值即可
      // indexHtmlFile: 'apps/your-app/src/component-index.html' // 若重复则注释或删除
    }
  });
  

• 查看project.json的测试目标配置，确保options里的indexHtmlFile路径正确，避免NX和Cypress双重处理路径。

3. Angular16.0.1不在官方支持版本范围的提示 #

• 升级Cypress到12.17.0及以上版本（该版本开始正式支持Angular16）：

  npm install cypress@latest --save-dev
  

• 同步升级@nrwl/cypress和@nrwl/angular到NX 16.x版本，确保和Angular16的兼容性：

  npm install @nrwl/cypress@latest @nrwl/angular@latest --save-dev
  

• 若暂时无法升级，可在cypress.config.ts中启用实验性Angular支持（不推荐长期使用）：

  export default defineConfig({
    component: {
      experimentalAngularSupport: true,
      // 其他配置...
    }
  });
  

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