Vue Cypress Component Test Runner测试文件路径配置不生效问题

• 你当前执行的cypress run --browser chrome默认运行E2E测试模式，只会读取E2E测试配置，使用默认的cypress/integration作为用例搜索目录，不会读取你写在component节点下的组件测试配置。
• 若你使用的是Cypress 10及以上版本，官方已废弃cypress.json作为配置文件，默认读取根目录下的cypress.config.js/cypress.config.ts，这也是配置不生效的常见原因。

1. 调整启动命令 #

在package.json的脚本中添加--component参数，指定运行组件测试：

{
  "scripts": {
    "cy:run:chrome": "cypress run --component --browser chrome",
    "cy:open:component": "cypress open --component"
  }
}

如果使用Cypress 9及以下版本，完成这步后先重新执行命令验证是否正常识别用例。

2. 适配高版本Cypress配置（Cypress 10+） #

删除原有的cypress.json，在项目根目录新建cypress.config.js（TypeScript项目可新建cypress.config.ts），参考配置如下：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      // 项目用webpack就填webpack，用vite就填vite
      bundler: 'webpack'
    },
    // 匹配src目录下所有符合命名规则的测试文件
    specPattern: 'src/**/*.spec.[jt]s?(x)'
  }
})

3. 验证文件匹配规则 #

按你的需求将测试文件和对应组件放在同一目录，例如src/components/Button.vue对应的测试文件为src/components/Button.spec.ts，确保文件后缀和路径符合specPattern的匹配规则。

4. 验证配置生效 #

先执行npm run cy:open:component打开Cypress可视化界面，确认所有测试用例正常加载后，再执行npm run cy:run:chrome运行无头测试即可。

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