Unable to use Cucumber preprocessor with Code coverage (and React unit test with TypeScript)

[edimitchel]

Current behavior

Hi !
Before integrating Code coverage on our project, we didn't have any problem with our Cypress tests.
But since we integrated coverage report, all going wrong.. and especially with Cucumber test suites.

All my feature files are stored in the folder cypress/integration.

Here the plugin/index.js file:

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

// @ts-ignore
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line import/no-extraneous-dependencies
const resolve = require('resolve');

/**
 * @param {Cypress.PluginEvents} on
 * @param {Cypress.PluginConfigOptions} config
 * @return {Cypress.PluginConfigOptions}
 */
module.exports = (on, config) => {
  // @ts-ignore
  // eslint-disable-next-line global-require
  require('cypress-react-unit-test/plugins/load-webpack')(on, config);

  return config;
};

/*
 * @param {Cypress.PluginEvents} on
 * @param {Cypress.PluginConfigOptions} config
 * @return {Cypress.PluginConfigOptions}
 */
module.exports = (on, config) => {
  // @ts-ignore
  on('file:preprocessor', (file) => {
    if (file.filePath.includes('.feature')) {
      browserify.defaultOptions.browserifyOptions.plugin.unshift([
        'tsify',
        { project: path.resolve(ROOT, 'tsconfig.json') },
      ]);

      const cucumberOptions = {
        typescript: resolve.sync('typescript', { basedir: config.projectRoot }),
      };
      return cucumber(cucumberOptions);
    }

    // @ts-ignore
    return webpackPreprocessor();
  });

  return config;
};

Here cypress.json config :

{
  "testFiles": "**/*.{feature,features}",
  "experimentalComponentTesting": true,
  "experimentalShadowDomSupport": true,
  "ignoreTestFiles": [
    "*.js",
    "**/snapshots.js",
    "**/__image_snapshots__/*"
  ],
  "reporter": "mocha-junit-reporter",
  "reporterOptions": {
    "mochaFile": "./target/surefire-reports/test-results.[hash].xml",
    "testsuitesTitle": "Cypress tests",
    "useFullSuiteTitle": true,
    "testCaseSwitchClassnameAndName": true
  },
  "cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "cypress/integration"
  },
  "env": {
    "webpackFilename": "webpack/webpack.unit.js"
  }
}

With this configuration, I have this error : TypeError: path argument is required to res.sendFile

I use cypress-react-unit-test plugin for loading webpack file. I want to extends preprocessoring to feature files.
I test to merge both in one function : same behavior. I encountered randomly an issue about bad description file.
When I put load-webpack preprocessor from cypress-react-unit-test, stepDefinitions are not well serialized (Cypress says step definition are missing for run Cucumber tests...)

Desired behavior

Run cucumber tests successfully with code coverage report.

Example of a feature file:

Feature: Patient Details
  Scenario Outline: reviewing a patient details
    Given "<patient_id>" patient details are being reviewed
    Then the patient name should be equal to "<name>"
    Then clicking on the patient name should open in a new tab
    Then the patient identifier should be equal to "<identifier>"
    Then the patient age at the time of the study should be equal to "<age>"

  Examples:
    | patient_id   | name                   | identifier      | gender   | height      | weight      | bmi       | birth_date     | age    |
    | 1            | ‒ No Patient Details ‒ | ‒               | O        | ‒           | ‒           | ‒         | ‒              | ‒      |
    | 2            | Cooper, James          | 980308871   | M        | 185 cm      | 95 kg       | 29.22     | 12 Feb 1993    | 20y    |
    | 3            | 512838826, ‒       | 980308872   | 女性     | 82 cm       | 15 kg       | 22.34     | 03 11月 2018    | 20ヶ月 |

Test code to reproduce

Too complex to reproduce it (i'll do it when I have time..) sorry..

Linked issues :

• Typescript with-out-of-the-box -> "undefined is not a function" #426
• Not compatible with @cypress/code-coverage #198
• Code coverage e2e and unit test combining not working cypress-io/code-coverage#265

Versions

• Cypress version: 4.12.1
• Preprocessor version: 2.5.4
• Node version: v12.14.1 (npm : 6.13.4)

[edimitchel]

See issue encountered by @bahmutov PR
cypress-io/cypress-react-unit-test#374

[rkrisztian]

I don't think "cypress-cucumber-preprocessor": {...} is supposed to be in cypress.json. Try package.json or whatever other place the documentation mentions, like cypress-cucumber-preprocessor.config.js.

[edimitchel]

Issue is resolved by the PR #443.