Cypress in Angular with cucumber > process is not defined

Question

I try to use Cypress for e2e testing in an Angular 12 project with Cucumber and TypeScript.

Cypress itself starts successfully via npx cypress open and the feature file I created is shown:

When I start the test for this feature, I receive the following error:

I found a similar issue here but no solution I could apply. I believe this error occurs because I am using the cypress-own browser and the process variable is not available there. I also had a look at this repository but failed to find anything that would solve this issue.

The package.json of this project looks like this:

{   "name": "randomAppName",   "version": "0.0.0",   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "i18n": "ng extract-i18n --output-path src/assets/i18n",
    "lint": "eslint . --ext .ts,.js",
    "lint-fix": "eslint . --ext .ts,.js"   },   "private": true,   "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.5",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.5",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@ngrx/effects": "^12.4.0",
    "@ngrx/store": "^12.4.0",
    "@ngrx/store-devtools": "^12.4.0",
    "moment": "^2.29.1",
    "ngrx-forms": "^6.3.5",
    "path-browserify": "^1.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"   },   "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true   },   "devDependencies": {
    "@4tw/cypress-drag-drop": "^1.8.0",
    "@angular-devkit/build-angular": "~12.2.5",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "12.7.0",
    "@angular-eslint/eslint-plugin-template": "12.7.0",
    "@angular-eslint/schematics": "12.7.0",
    "@angular-eslint/template-parser": "12.7.0",
    "@angular/cdk": "^12.0.1",
    "@angular/cli": "~12.2.5",
    "@angular/common": "^12.0.1",
    "@angular/compiler-cli": "~12.2.0",
    "@angular/core": "^12.0.1",
    "@angular/localize": "^12.2.5",
    "@cucumber/cucumber": "^7.2.1",
    "@cypress/browserify-preprocessor": "^3.0.1",
    "@cypress/webpack-preprocessor": "^5.9.0",
    "@jscutlery/cypress-harness": "^0.3.4",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "cucumber": "^6.0.5",
    "cucumber-pretty": "^6.0.0",
    "cucumber-tsflow": "^4.0.0-rc.1",
    "cypress": "^8.4.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "cypress-mouse-position": "^1.0.0",
    "cypress-pipe": "^2.0.0",
    "cypress-xpath": "^1.6.2",
    "eslint": "^7.26.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.25.2",
    "jasmine-core": "~3.8.0",
    "jest": "^27.2.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "prettier": "^2.5.1",
    "rxjs": "^6.6.7",
    "ts-loader": "^9.2.6",
    "ts-node": "^9.1.1",
    "tsify": "^4.0.1",
    "typescript": "~4.3.5",
    "webpack": "^5.65.0",
    "zone.js": "^0.11.4"   },   "browser": {
    "fs": false,
    "os": false,
    "path": false   } }

The webpack.config.js looks as follows:

module.exports = {
  resolve: {
    modules: ["node_modules"],
    extensions: ["*", ".js", ".jsx", ".json"],
    symlinks: false,
    cacheWithContext: false,
    fallback: { path: require.resolve("path-browserify") },
  },
  node: {},
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
      {
        test: /\.feature$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/loader",
          },
        ],
      },
    ],
  },
};

Please let me know, if any additional information is needed, I will gladly provide it.

score 6 · Accepted Answer · answered Dec 29 '21 at 17:44

process is undefined because the code is being executed in the browser in your case.

You probably used a configuration that worked with webpack 4 which provided mock apis for path (you already incldued a fallback) or in this case process. Webpack 5 Release Notes: node.process removed

It looks like the cucumber parser is actually executed in browser context with this loader by emitting the cucumber code to the browser bundle.

I'd recommend not to use webpack at all if there is no specific reason to do so. You don't even need to transpile typescript with recent cyperss versions. Instead I'd suggest to use the setup suggested in the cypress-cucumber-preprocessor readme:

If webpack is required you can try to mock the process variable. I verified that adding the following to support/index.js works when using webpack 5 with the original example repository:

window.process = {
 argv: [],
 env: {},
};

Cypress in Angular with cucumber > process is not defined

1 Answers1