Cypress 10和 cucumber Angular 的Webpack编译错误

rjzwgtxy 于 2023-01-09 发布在 Webpack

关注(0)|答案(5)|浏览(248)

我在这个网站上看到过其他类似的问题，但没有一个能让我满意。我没有任何webpack.config.js文件，因为我们从angular中获取默认配置。请参见下面的相应图片，以更好地了解我的问题。

我的项目中的其他配置：
package.json

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

cypress.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：**Hello @Wirtuald，谢谢回复我。我开始在一个相当复杂的Angular 项目上遇到这个问题。所以，我从头开始创建了一个基本项目，我仍然有同样的问题。然后，我给予你下面这个新项目的所有信息：

我没有“插件”文件夹
包.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}"
]

}

cypress.config.js:

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

项目结构

direct-attention-steps.js

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

webpack

来源：https://stackoverflow.com/questions/72729879/webpack-compilation-error-with-cypress-10-and-cucumber-in-angular

5条答案

按热度按时间

gj3fmq9x1#

您只是错过了Webpack进程from quick-start
然后配置您的首选捆绑包来处理功能文件。请参阅示例/了解如何使用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,
  },
});

在cypress.config.js的Update 1中，您有一处打字错误

module.exports = defineConfig({

应该是

export default defineConfig({

赞(0）回复(0）举报 2023-01-09

rur96b6h2#

尝试安装@cypress/webpack-preprocessor

赞(0）回复(0）举报 2023-01-09

ego6inou3#

在我的例子中，这是cypress最新版本的问题
我在用

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

First, make sure that you use the latest version of @badeball/cypress-cucumber-preprocessor which fix some compatibilty issues with cypress 10. See https://github.com/badeball/cypress-cucumber-preprocessor/issues/722# for futher info.
Also, latest version of cypress has removed plugin file. In my case, migrating all the code from cypress/plugins/index.js inside setupNodeEvents method solved the issue. See https://docs.cypress.io/guides/references/migration-guide#Plugins-File-Removed
魔鬼藏在细节里，也可能和你的插件文件本身有关。也许你可以分享一下，这样我们就可以更好地帮助你。你还可以分享一下你使用的"@badeball/cypress-cubber-preprocessor "的版本吗
希望对你有帮助，

赞(0）回复(0）举报 2023-01-09

fafcakar4#

我修改了上面的解决方案：

import webpack from "@cypress/webpack-preprocessor";

并且我删除了.ts文件的规则，只在webpack配置中保留了.feature规则。
从那以后一切都很好

赞(0）回复(0）举报 2023-01-09

omqzjyyz5#

我也遇到过类似的问题，除了调整脚本，我的解决方案是将节点从18降级到16.13.2

赞(0）回复(0）举报 2023-01-09

我来回答

Cypress 10和 cucumber Angular 的Webpack编译错误

5条答案

相关问题

热门标签

最新问答