Cypress-cucumber-preprocessor: Cypress + Cucumber + Typescript + Webpack does not work

[loriepisicchio]

Hello !
I cannot get my cypress tests to work in my Angular app, writing tests with Cucumber and Typescript.
Here is a repo that reproduces the issue: https://github.com/loriepisicchio/cypress-typescript-cucumber-demo.
To reproduce the issue, simply run npm run cypress
This will open the Cypress dashboard.
Then run Facebook.feature for instance. And you'll get the following exception :

/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/cypress/integration/facebook/Facebook/facebook.ts
./cypress/integration/facebook/Facebook/facebook.ts
[tsl] ERROR in /home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/cypress/integration/facebook/Facebook/facebook.ts(2,23)
      TS7016: Could not find a declaration file for module 'cypress-cucumber-preprocessor/steps'. '/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/node_modules/cypress-cucumber-preprocessor/steps.js' implicitly has an 'any' type.

/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/e2e/src/app.e2e-spec.ts
[tsl] ERROR in /home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/e2e/src/app.e2e-spec.ts(12,37)
      TS2551: Property 'toEqual' does not exist on type 'Assertion'. Did you mean 'equal'?

/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts
[tsl] ERROR in /home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts(20,17)
      TS2339: Property 'toBeTruthy' does not exist on type 'Assertion'.

/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts
[tsl] ERROR in /home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts(26,23)
      TS2551: Property 'toEqual' does not exist on type 'Assertion'. Did you mean 'equal'?

/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts
[tsl] ERROR in /home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/src/app/app.component.spec.ts(33,54)
      TS2551: Property 'toContain' does not exist on type 'Assertion'. Did you mean 'contain'?

There seems to be some kind of conflict between jasmine version used in my Angular app tests, and the one used by Cypress.
To create this project, I used this one as a reference :
https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example

Let me know if I can provide any other info that helps investigating this.
Thanks !

[lgandecki]

Take a look here:

https://github.com/loriepisicchio/cypress-typescript-cucumber-demo/pull/1

I removed everything related to cucumber plugin and this still brakes.

looks like it's enough to have this line in any file:

/// <reference types="cypress" />

and things start to break, for some reason it starts to parse the Angular app tests - as you noticed.

if you remove that line from my fork, tests pass.

Do the same in your repo, you have that line at least in two files - you will have some remaining errors, but those you just have to take care of one by one.
for the

TS7016: Could not find a declaration file for module 'cypress-cucumber-preprocessor/steps'. '/home/pisicchl/dev/playground/cypress/cypress-typescript-cucumber-demo/node_modules/cypress-cucumber-preprocessor/steps.js' implicitly has an 'any' type.
 ```
you can just ignore those lines, I don't know TypeScript very well but I'm sure you can create some kind of a global d.ts file that will make those errors go away. 

also, make url a string in the 

Then(I see {string} in the title, title => {
```
line.
One more tip, change "ignoreTestFiles": ".js"
to "ignoreTestFiles": ".ts"
in cypress.json , to have a cleaner overview in the cypress dashboard.

Please let me know if you find an error actually related to our plugin.

I'd love to see if you figure out how to make it play nicely with typescript (not only work - but be properly typed)

[loriepisicchio]

Thanks for your help. I'll try to make it work from end to end, and I'll let you know. :smiley:

[jogelin]

It is working on my side:

./package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "test:ci": "cypress run",
    "test": "cypress open"
  },
  "keywords": [
    "cypress",
    "cypress-io"
  ],
  "dependencies": {
    "@types/node": "10.12.17"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "4.0.2",
    "cypress": "3.1.3",
    "cypress-cucumber-preprocessor": "1.9.1",
    "cypress-testing-library": "2.3.4",
    "ts-loader": "5.3.1",
    "typescript": "3.2.2",
    "webpack": "4.27.1"
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  }
}

./cypress.json

{
  "baseUrl": "http://localhost:4200",
  "video": false,
  "ignoreTestFiles": "**/*.{js,ts}",
  "env": {
    "url": "http://localhost:4200"
  }
}

./tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"], // don't forget node here
    "esModuleInterop": true,
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["**/*.ts"]
}

./cypress/webpack.config.js

module.exports = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader"
          }
        ]
      },
      {
        test: /\.feature$/,
        use: [
          {
            loader: "cypress-cucumber-preprocessor/loader"
          }
        ]
      }
    ]
  }
};

./cypress/integration/app/Search.feature

Feature: The main page

  I want to open the main page

  Background:
    Given I open the desktop application

  @focus
  Scenario: Opening the main page
    Then I see "Title" in the title

./cypress/integration/app/Search/steps.ts

const { When, Then, Given } = require('cypress-cucumber-preprocessor/steps');

Given(/^I open the desktop application$/, () => {
  cy.viewport(1280, 1024);
  cy.visit(Cypress.env('url'));
});

Given(/^I open the mobile application$/, () => {
  cy.viewport(360, 640);
  cy.visit(Cypress.env('url'));
});

Then(/^I see "([^"]*)" in the title$/, (text: string) => {
  cy.title().should('eq', text);
});

[lgandecki]

great to see you got it to work @jogelin , how are you liking it so far? Any feedback?
(I allowed myself to edit your comment to add the syntax highlighting)

[alveshelio]

Hi @jogelin,

Can you please post the content of your /plugins/index.ts file. I'm trying to make it work but I'm getting this error:

/my-project/test/cypress/e2e/homepage/pfu-1951-filtre-type-contenu.feature:1
Feature: Filtrer la liste de contenus par type de contenu
                 ^
ParseError: Unexpected token

It looks like cypress-cucumber-preprocessor isn't able to handle the .feature files

This is my plugins/index.ts file

const webpack = require("@cypress/webpack-preprocessor")
const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on: any) => {
  const options = {
    webpackOptions: require("../webpack.config.js")
  }
  on('file:preprocessor', (file: any) => {
    if (file.filePath.match(/\.ts$/)) {
      return webpack(options)(file)
    } else {
      return cucumber()(file)
    }
  })
}

Thank you

[jogelin]

@alveshelio Hello, sorry for the delay, no so much time for the moment ;)

./e2e/cypress/plugins/index.js

const webpack = require('@cypress/webpack-preprocessor');

module.exports = on => {
  const options = {
    webpackOptions: require('../webpack.config.js')
  };
  on('file:preprocessor', webpack(options));
};

2 remarks:

• I am using a simple .js file because I don't remember why but don't think it is working with a ts file for the plugin. I am using typescript for all other files (support, etc..)
• I prefer to use the webpack loader for cucumber instead of a plugin configuration

[kellyprankin]

Any hints on how to get this to work in an Angular project since webpack is handled automatically? Should it be the same?

[lgandecki]

@kellyprankin can you make a simple reproduction? You could still have a custom webpack config that would only be used by cypress cucumber preprocessor, even if angular hides its webpack config from you

[lgandecki]

We now have examples for using TypeScript with Webpack:

https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/

and without it:

https://github.com/TheBrainFamily/cypress-cucumber-typescript-example/

I'm closing this thread for now, if you have a specific issue, after verifying that the examples work, and that your configuration is in line with them, or if you need to somehow configure things differently - please create a new one and I will be glad to take a look.

As for Angular - I think both approaches are correctly, you can
a) have a separate webpack configuration file (treat your cypress folder as a completely different codebase some people actually do have a completely separate projects for E2E/UI tests, from their perspective it doesn't matter that what they test is angular, react ,or something else still. I do not recommend that - as I like to have atomic pushes to CI, where any change to a code is coupled with a change to related tests).
b) use the tsify way

If things still do not work, please create a simple reproduction and I will be happy to take a look, we definitely want to have our plugin work smoothly with Angular.

[lgandecki]

(btw, I might work on an example for Angular at some point, if I have a bit of free time, just as an experiment, if I get it to work I will message here)

[dfawole]

@lgandecki
Need your assistance , I have different feature files that is testing different part of the system and I wanted to create different steps in .ts files to test each features, following the examples you gave , I can only create on step file(.ts) for all the feature files, when I created a folder for other steps, I got the below error

 ./cypress/integration/Mobile/mobile.ts
Module not found: Error: Can't resolve 'cypress-cucumber-preprocessor/mobile' in '/Users/myUser/Documents/game-test/cypress/integration/Mobile'
resolve 'cypress-cucumber-preprocessor/mobile' in '/Users/myUser/Documents/game-test/cypress/integration/Mobile'
Parsed request is a module
using description file: /Users/myUser/Documents/game-test/package.json (relative path: ./cypress/integration/Mobile)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/myUser/Documents/game-test/cypress/integration/Mobile/node_modules doesn't exist or is not a directory

I did set
"cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true }
And when I use the same step file ( .ts ) for different feature files i got :
Error: Step implementation missing for: I am on mobile

Please what am i doing wrong and Thanks in advance

[lgandecki]

Hard to say.. I might need a very simple reproduction to see what's going on. At least how the mobile.ts looks like in terms of what it imports.
Also, could you please create another issue so we don't spam the good folks that are part of this one?

[dfawole]

@lgandecki
Thanks for your response , I have created a new issue has you said and created a repo to see the structure.. the link to the issue https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/174

[vandammeb]

@lgandecki : Just wondering if you have found the time for the Angular example you mentioned in a previous comment?

[lgandecki]

Thanks for the reminder @vandammeb. not yet, but I've just put it on my todo list so once that bubbles up it will get done, unless someone (maybe you? ;) ) will beat me to it!

[stucox]

For anyone encountering this error:

Could not find a declaration file for module 'cypress-cucumber-preprocessor/steps'. '/path/to/project/node_modules/cypress-cucumber-preprocessor/steps.js' implicitly has an 'any' type.

when using noImplicitAny set to true (which some teams do to enforce more rigourous type safety):

Try

npm install --dev @types/cypress-cucumber-preprocessor

or

yarn add @types/cypress-cucumber-preprocessor

Worked for me.

@lgandecki Maybe this should be added to this to the README?

[lgandecki]

@stucox sure, please send a PR :)

[cquirosj]

In case useful to anyone, this article from Tápai Balázs helped me a lot: https://tapaibalazs.dev/how-to-set-up-gherkin-with-nx-cypress-ts/