在@badeball/cypress-cucumber-preprocessor中用testing-library查询报错：cy.findByRole不是函数

问题根源 #

使用@badeball/cypress-cucumber-preprocessor时，@testing-library/cypress注册的自定义命令（如findByRole）未被正确注入到Cucumber测试的上下文环境中，通常是因为support文件加载逻辑或预处理器配置存在问题。

具体修复步骤 #

1. 确认Cypress Support文件的导入配置 #

在cypress/support/e2e.ts（或.js）中确保全局导入Testing Library命令：

import '@testing-library/cypress/add-commands'

如果使用TypeScript，需在cypress/tsconfig.json中添加类型声明：

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

2. 调整cypress.config.ts中的预处理器配置 #

确保setupNodeEvents正确配置Cucumber预处理器，并明确指定support文件路径：

import { defineConfig } from 'cypress'
import createBundler from '@bahmutov/cypress-esbuild-preprocessor'
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor'
import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild'

export default defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/**/*.feature',
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      })

      on('file:preprocessor', bundler)
      await addCucumberPreprocessorPlugin(on, config)

      // 强制指定support文件路径，确保全局命令被加载
      config.supportFile = 'cypress/support/e2e.ts'
      return config
    },
  },
})

关键注意点：必须返回修改后的config对象，否则Cypress无法识别support文件配置。

3. 验证Cucumber步骤定义的命令使用 #

在步骤定义文件中直接使用全局注册的命令，无需重复导入Testing Library：

import { Then } from '@badeball/cypress-cucumber-preprocessor'

Then('我应该看到指定标题', () => {
  cy.findByRole('heading', { name: /欢迎/i }).should('be.visible')
})

4. 重置依赖（可选） #

如果上述步骤无效，可尝试清除依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

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