Webpack Compilation Error with Cypress 10 and Cucumber in Angular

user_16155234 0
Viewed 1777

I have seen other similar questions in this site, but non of them have a satisfatory solution for me. I don't have any webpack.config.js file since we take the default configuration from angular. Please, see below the corresponding image to have a better sight of my problem.

enter image description here

Other configurations in my project:

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
},
})

Update 1: Hello @Wirtuald, thanks for responding me. I began getting this issue on a quite complex angular project. So, I created a basic project from scratch and I still have the same issue. Then, I give you below all the information of this new project:

  • I dont have "plugins" folder

  • versions on package.json:

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

  • preprocessor config on 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
  },
 },
});

-project structure

enter image description here

  • direct-attention-steps.js
    import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
    Given("Access to NXSuite", () => {
    cy.visit("https://www.nxsuite.com");
    })
cypress-cucumber-preprocessor angular cypress webpack cucumber
4 Answers

You're just missing the webpack process, from quick-start

Then configure your preferred bundler to process features files. See examples/ for how-to using Browserify, Esbuild or Webpack.

The webpack.ts example is given here cypress-cucumber-preprocessor/examples/webpack-ts/cypress.config.ts.

It needs additional installs for @cypress/webpack-preprocessor and 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,
  },
});

In Update1 in cypress.config.js you have a typo

module.exports = defineConfig({

should be

export default defineConfig({
user_169977070

Try to install @cypress/webpack-preprocessor

user_38175170

In my case, it was an issue with the latest version of cypress

I'm using

"@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

The devil is in the details, it could also be related to your plugin file itself. Maybe you could share it, so that we can help you better. Can you also share what version of "@badeball/cypress-cucumber-preprocessor" you use

Hope it will help you,

user_133376870

I modified the above solution:

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

and I removed the rule for .ts files, keeping just the .feature rule in the webpack config.

It all worked ok after that

user_6821850
Related