Cucumber support for cypress component tests

[lharriespipe]

Current Behavior

I am unable to get component tests working with the "@badeball/cypress-cucumber-preprocessor" plugin.

I can get them to work perfectly fine for e2e tests however for component tests I get the following error

The following error originated from your test code, not from Cypress.

> Module parse failed: Unexpected token (3:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| Feature: BBC
|
>     I want to check the website is up
|
|     Scenario: site is displayed

Expected Behavior

previously running cy.ts component tests should run when converted to cucumber structure as with e2e tests

GitHub Repo

No response

Steps to Reproduce

1.

Nx Report

Node : 18.16.0
   OS   : win32 x64
   npm  : 9.6.7

   nx : 15.0.13
   @nrwl/angular : 15.0.13
   @nrwl/cypress : 15.0.13
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.0.13
   @nrwl/esbuild : 15.0.13
   @nrwl/eslint-plugin-nx : 15.0.13
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.13
   @nrwl/js : 15.0.13
   @nrwl/linter : 15.0.13
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.0.13
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.13
   @nrwl/web : Not Found
   @nrwl/webpack : 15.0.13
   @nrwl/workspace : 15.0.13
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @compodoc/compodoc: 1.1.19
         @storybook/angular: 6.5.15

Failure Logs

No response

Operating System

• [ ] macOS
• [ ] Linux
• [x] Windows
• [ ] Other (Please specify)

Additional Information

Below is my cypress.config.ts file,

If I replace the component section with the e2e section my tests will run however in this setup it fails to load. I believe it's related to the line ...nxComponentTestingPreset(__filename), however I can't find any documentation on what it's doing to figure out whats going wrong.

import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import browserify from "@badeball/cypress-cucumber-preprocessor/browserify";
import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  await addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    browserify(config, {
      typescript: require.resolve("typescript"),
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

export default defineConfig({
  fileServerFolder: '.',
  fixturesFolder: './cypress/integration',
  modifyObstructiveCode: false,
  video: true,
  videosFolder: '../../../dist/cypress/app-.../videos',
  screenshotsFolder:
    '../../../dist/cypress/app-.../screenshots',
  chromeWebSecurity: false,
  env: {
    TAGS: 'not @ignore and not @pending',
  },
  // e2e: {
  //   specPattern: "**/*.feature",
  //   supportFile: './cypress/support/e2e.ts',
  //   setupNodeEvents,
  // },
  component: {
    ...nxComponentTestingPreset(__filename),
    // add your own config here
    specPattern: "**/*.feature",
    supportFile: './cypress/support/e2e.ts',
    setupNodeEvents,
  },
});

[barbados-clemens]

I'm not too familiar with cucumber but reading around it seems like it should work. but angular is a special case since the underlying webpack process isn't directly exposed like other frameworks like react. All Nx does is provide normalized values for the build config for the underlying angular project to be passed to the angular devkit utils via cypress.

do you know if this works outside of an Nx workspace?

one thing I noticed is you do have the e2e support file being used for the component settings. I would recommend not mixing the two support files as it can cause issues of e2e/component setups mixing and causing cryptic errors.

Lastly, Do you have a repo I can use to further investigate?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[lharriespipe]

Updated the support file references with still no luck, I'll try to get a repo project I can share put together

[lharriespipe]

@barbados-clemens I've created a repo here which demos the issue.

Running e2e tests is successful however the same config applied to component tests fails.

I have two sets of config, one currently commented out using the default cy.ts files which runs successfully and the other using cucumber to demonstrate the issue.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[zilia-gmethot]

@lharriespipe Here is my working configuration:

import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
import { devServer } from '@cypress/webpack-dev-server';
import { AngularWebpackPlugin } from '@ngtools/webpack';

function webpackConfig(cypressConfig: Cypress.PluginConfigOptions) {
  return {
    resolve: {
      extensions: ['.ts'],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          loader: '@ngtools/webpack',
        },
        {
          test: /\.feature$/,
          use: [
            {
              loader: '@badeball/cypress-cucumber-preprocessor/webpack',
              options: cypressConfig,
            },
          ],
        },
      ],
    },
    plugins: [
      new AngularWebpackPlugin({
        tsconfig: 'cypress/tsconfig.json',
      }),
    ],
  };
}

const preset = nxComponentTestingPreset(__filename);

export default defineConfig({
  component: {
    ...preset,
    supportFile: 'cypress/support/component.ts',
    fixturesFolder: 'cypress/fixtures',
    devServer(devServerConfig) {
      return devServer({
        ...devServerConfig,
        ...preset.devServer,
        webpackConfig: webpackConfig(devServerConfig.cypressConfig),
      });
    },
    async setupNodeEvents(on, config) {
      // This is required for the preprocessor to be able to generate JSON reports after each run, and more.
      await addCucumberPreprocessorPlugin(on, config);

      // Make sure to return the config object as it might have been modified by the plugin.
      return config;
    },
  },
});

You might have to change the path to your Cypress-specific TypeScript configuration file and install missing dependencies but that should give you a starting point.

[leosvelperez]

I'm closing this since it could be solved in user-land (see https://github.com/nrwl/nx/issues/17326#issuecomment-1780018878 for a potential solution).

The Nx generators don't generate a setup for Cucumber, and we don't plan to do so. You can customize the Cypress config as needed to fit your use case. As long as Cypress Component Testing and Cucumber work together in a non-Nx workspace (if they don't, then it's an issue for the Cypress repo), there should be nothing on the Nx side to prevent it from working on an Nx workspace.

If you still need help, please ask in the Nx Community Discord or create a GH discussion. If you still think there's an issue caused by Nx that prevents this from working, please open a new issue with up-to-date information and a repo where the issue can be reproduced.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.