如何让Cypress组件模式跳过e2e.ts并使用component.ts？

• 明确配置两种模式的支持文件路径
  别让Cypress自动推断支持文件，直接在cypress.config.ts里给组件模式和E2E模式分别指定supportFile：

  import { defineConfig } from "cypress";
  
  export default defineConfig({
    component: {
      devServer: {
        framework: "react", // 替换为你使用的框架，比如vue/angular
        bundler: "webpack",
      },
      supportFile: "cypress/support/component.ts" // 组件模式专属支持文件
    },
    e2e: {
      supportFile: "cypress/support/e2e.ts" // E2E模式专属支持文件
    }
  });
  

• 删除全局自动加载的support入口文件
  如果cypress/support目录下存在index.ts或index.js，它会被所有模式自动加载，直接删除或重命名该文件，避免E2E的代码被带入组件模式。

• 确认组件测试文件的存放位置
  把所有组件测试文件放在cypress/component目录下，不要和cypress/e2e目录的文件混放。Cypress是通过测试文件所在目录区分运行模式的，放错位置会触发错误的配置逻辑。

• 强制指定组件模式的配置文件（兜底方案）
  要是前面的方法都不生效，可以单独创建组件模式的配置文件，比如cypress.component.config.ts，只保留组件模式的配置内容：

  import { defineConfig } from "cypress";
  
  export default defineConfig({
    component: {
      devServer: {
        framework: "react",
        bundler: "webpack",
      },
      supportFile: "cypress/support/component.ts"
    }
  });
  

  然后使用该配置文件运行命令：

  npx cypress run --component --browser chrome --config-file cypress.component.config.ts
  

• 检查cy.mount的定义是否正确
  确保component.ts里正确注册了cy.mount命令，以React项目为例：

  import { mount } from 'cypress/react';
  
  declare global {
    namespace Cypress {
      interface Chainable {
        mount: typeof mount;
      }
    }
  }
  
  Cypress.Commands.add('mount', mount);
  

  避免在e2e.ts中定义同名命令造成覆盖。

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