关于(0 , _cypressCucumberPreprocessor.And)不是函数的技术求助

报错详情 #

(0 , _cypressCucumberPreprocessor.And) is not a function

排查步骤 #

• 检查包版本与依赖
  旧版cypress-cucumber-preprocessor已停止维护，当前官方推荐使用@badeball/cypress-cucumber-preprocessor。若仍在使用旧包，执行以下命令替换：

  npm uninstall cypress-cucumber-preprocessor
  npm install @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor --save-dev
  

• 修正导入语句
  确保步骤定义文件中使用正确的导入路径：

  // 错误写法（旧包）
  import { And } from 'cypress-cucumber-preprocessor'
  
  // 正确写法（新版包）
  import { And } from '@badeball/cypress-cucumber-preprocessor'
  

• 配置Cypress预处理器
  在cypress.config.js中正确注册预处理器，示例配置：

  const { defineConfig } = require("cypress");
  const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
  const { addCucumberPreprocessorPlugin } = require("@badeball/cypress-cucumber-preprocessor");
  const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");
  
  module.exports = defineConfig({
    e2e: {
      specPattern: "**/*.feature",
      async setupNodeEvents(on, config) {
        const bundler = createBundler({
          plugins: [createEsbuildPlugin(config)],
        });
  
        on("file:preprocessor", bundler);
        await addCucumberPreprocessorPlugin(on, config);
  
        return config;
      },
    },
  });
  

• 全局注册步骤关键字（可选）
  若不想在每个步骤文件中重复导入，可在cypress/support/e2e.js中全局注册Given/When/Then/And：

  import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
  
  global.Given = defineStep
  global.When = defineStep
  global.Then = defineStep
  global.And = defineStep
  

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