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

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 !

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18

Most upvoted comments

(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)

lgandecki on May 18, 2019

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

kellyprankin on Jan 22, 2019

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/

cquirosj on Sep 8, 2020

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!

lgandecki on Jul 25, 2019

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

alveshelio on Dec 28, 2018