Update TypeScript preprocessor examples (items.map is not a function)

[KyleVassella]

Current behavior

If I follow the webpack-preprocessor or browsify-preprocessor examples for TypeScript projects (see https://github.com/badeball/cypress-cucumber-preprocessor/tree/e450dc107374071c26318f14f351f56d559e7670/examples/browserify-ts) for cypress.config.ts in a TypeScript/Angular project, all of my tests throw the following error on line 576 of node_modules/@badeball/cypress-cucumber-preprocessor/lib/create-tests.js :

TypeError
items.map is not a function
node_modules/@badeball/cypress-cucumber-preprocessor/lib/create-tests.js:576:1

  574 |         : noStepDefinitionPathsTemplate;
  575 |     const maybeEscape = (string) => strictIsInteractive() ? string.replace("*", "\\*") : string;
> 576 |     const prettyPrintList = (items) => items.map((item) => "  - " + maybeEscape(item)).join("\n");
      | ^
  577 |     return stripIndent(template)
  578 |         .replaceAll("<text>", text)
  579 |         .replaceAll("<step-definitions>", prettyPrintList(stepDefinitionHints.stepDefinitions))

Desired behavior

The documentation and examples should work without these errors in TypeScript projects.

Test code to reproduce

Versions

• Cypress version: 10.3.0
• Preprocessor version: 11.5.1
• Node version: 16.14.0

Checklist

• [ x] I've read the FAQ.
• [x ] I've read Instructions for logging issues.
• [ x] I'm not using cypress-cucumber-preprocessor@4.3.1 (package name has changed and it is no longer the most recent version, see #689).

[badeball]

Can't reproduce, the examples work fine. Why would you completely omit any information to reproduce the error?

[KyleVassella]

I couldn't think of a way to share an entire Angular framework and allow you to run Cypress e2e tests in it (be it StackBlitz, jsFiddle, etc). I can run angular projects in those but can't run Cypress in those.

I assure you, the current instruction set/code base does not work on Angular (a very popular Google front end framework). I was able to finagle TheBrainFamily's cypress-cucumber-preprocessor version 4.3.1 to work (except that running tests via tags did not work - all tests ran regardless of what tag I used). But any cypress-cucumber-preprocessor version past 4.3.1 (aka @badeball ) does not work with Angular.

The only way for you to reproduce would be, on your local machine, set up an angular project like so:

npm install -g @angular/cli
ng new my-app
Then run ng e2e

This will prompt you to install an e2e test framework. Select 'Cypress' - this will install the cypress-schematic version 2. Cypress-schematic is just Angular's way of installing Cypress. NOTE: if you are not prompted to install an e2e framework, just run ng add @cypress/schematic

Okay, now Cypress v10 is set up. Now we run npm install @badeball/cypress-cucumber-preprocessor (or even better, npm install --save-dev @badeball/cypress-cucumber-preprocessor, since we don't need this for production builds, only for development).

Then we add our configurations in package.json like so:

  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": false,
    "stepDefinitions": "cypress/e2e",
    "filterSpecs": true
  },

Then we install a preprocessor. Let's use Browserify:
npm install --save-dev @cypress/browserify-preprocessor

Then we modify cypress.config.ts in the project root, using the typescript example provided in this repo.

Then we write a simple Cucumber/Gherkin test.

Then we run ng e2e, and all the tests will fail with typeerror: items.map is not a function

[badeball]

You've indeed stumbled upon a bug, in part of the code that was going to show you a more thorough and informative error message. It has nothing to do with Angular though. For now you can circumvent it by configuring step definitions as array of string(s) instead of a string.

[badeball]

A fix for the above-mentioned issue has been released in v12.0.0.

[KyleVassella]

You've indeed stumbled upon a bug, in part of the code that was going to show you a more thorough and informative error message. It has nothing to do with Angular though. For now you can circumvent it by configuring step definitions as array of string(s) instead of a string.

Thanks for the hard work @badeball . After changing stepDefinitions to an array of strings, I get better error messages, and I can now see that my issue was my filepath in the specDefinitions property of package.json. I still had the value I was using in cypress-cucumber-preprocessor v4.3.1. In @badeball/cypress-cucumber-preprocessor v11.0.0 and up, I needed to change this to a more specific value (even though my directory structure was the same) and include the file extension as well. I changed stepDefinitions in package.json to the following, and now all works well in Angular! (including tags).

    "stepDefinitions": [
      "cypress/e2e/step-definitions/*.steps.ts"
    ],

Much appreciated