Angular 中 Cypress 10 和 Cucumber 的 Webpack 编译错误

Question

我在这个网站上看到过其他类似的问题，但没有一个对我来说有令人满意的解决方案。我没有任何 webpack.config.js 文件，因为我们从 Angular 获取默认配置。请参阅下面相应的图片，以便更好地了解我的问题。

我的项目中的其他配置：

包.json

  "cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"json": {
  "enabled": true
},
"stepDefinitions": "**/cypress/e2e/**/*.js",
"step_definitions": "**/cypress/e2e/**/*.js"
},

赛普拉斯.config.ts

import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
  return require('./cypress/plugins/index.js')(on, config)
},
specPattern: '**/e2e/**/*.feature',
"supportFile": false,
chromeWebSecurity: false
},
})

更新 1： 您好@Wirtuald，感谢您回复我。我开始在一个相当复杂的角度项目中遇到这个问题。因此，我从头开始创建了一个基本项目，但仍然遇到同样的问题。接下来，我向大家介绍一下这个新项目的全部信息：

• 我没有“插件”文件夹

• package.json 上的版本：

    "devDependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^11.2.0",
    "cypress": "^10.2.0"
    },
  

• package.json 上的预处理器配置

  "cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "json": {
  "enabled": true
  },
  "stepDefinitions": [
  "[filepath].{js,ts}",
  "cypress/e2e/**/*.{js,ts}"
  ]
  

  }

• 赛普拉斯.config.js：

    const { defineConfig } = require("cypress");
    module.exports = defineConfig({
    e2e: {
    specPattern: "**/*.feature",
    chromeWebSecurity: false,
    setupNodeEvents(on, config) {
    // implement node event listeners here
    },
   },
  });
  

-项目结构

• 直接注意力步骤.js

    import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
    Given("Access to NXSuite", () => {
    cy.visit("https://www.nxsuite.com");
    })

Answer 1

你只是错过了 webpack 过程，从快速启动

然后配置您首选的捆绑程序来处理功能文件。请参阅示例/了解如何使用 Browserify、Esbuild 或 Webpack。

webpack.ts 示例在此处给出cypress-cucumber-preprocessor/examples/webpack-ts/cypress.config.ts。

它需要额外安装@cypress/webpack-preprocessor和ts-loader。

import { defineConfig } from "cypress";
import * as webpack from "@cypress/webpack-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  await addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    webpack({
      webpackOptions: {
        resolve: {
          extensions: [".ts", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.ts$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: "ts-loader",
                },
              ],
            },
            {
              test: /\.feature$/,
              use: [
                {
                  loader: "@badeball/cypress-cucumber-preprocessor/webpack",
                  options: config,
                },
              ],
            },
          ],
        },
      },
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

export default defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    supportFile: false,
    setupNodeEvents,
  },
});

在Update1中cypress.config.js你有一个拼写错误

module.exports = defineConfig({

应该

export default defineConfig({