如何让Cypress组件测试模式执行已插桩的代码？

以下是关键配置和排查步骤：

1. 确认插桩代码的加载位置 #

Cypress组件测试与E2E测试使用独立的支持文件：

• E2E测试默认加载 cypress/support/e2e.js
• 组件测试默认加载 cypress/support/component.js

将你的插桩代码（如cy.intercept、自定义命令或钩子逻辑）移至cypress/support/component.js，所有组件测试会自动加载并执行该文件中的代码。

2. 配置组件测试的Node层事件 #

如果插桩涉及Node层操作（如请求代理、环境变量修改），需在cypress.config.js的component配置块中设置setupNodeEvents：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react', // 替换为你的框架：vue/angular等
      bundler: 'vite',    // 或webpack
    },
    setupNodeEvents(on, config) {
      // 在这里添加Node层插桩逻辑
      on('before:run', () => {
        // 执行前置插桩操作
      })
    }
  }
})

3. 单个测试文件手动导入插桩 #

若无需全局生效，可在组件测试文件顶部直接导入插桩模块：

// 导入自定义插桩文件
import '../../support/stubs'

describe('My Component', () => {
  it('renders with stubbed data', () => {
    // 插桩需在组件挂载前执行
    cy.intercept('GET', '/api/data', { fixture: 'mock-data.json' })
    cy.mount(<MyComponent />)
    // 断言逻辑
  })
})

4. 确保插桩执行时机 #

组件测试中，插桩代码必须在组件挂载前执行。例如使用cy.intercept时，要先调用拦截方法，再执行cy.mount，否则组件发起的请求会绕过插桩逻辑。

5. 验证框架 bundler 集成 #

如果使用Vite或Webpack，确保已安装对应Cypress插件：

• Vite环境：安装@cypress/vite-dev-server
• Webpack环境：安装@cypress/webpack-dev-server

这些插件会保证Cypress正确处理代码与插桩逻辑的集成。

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