How to customize cypress config? Every time I try to change I get an error that the support file does not exist

[alexmonteirocastro]

Documentation issue

Whenever I try to customize my cypress project as described here and I replace, for example

import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';

export default defineConfig({
  e2e: nxE2EPreset(__dirname),
});

with

import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import { createBundler } from "@bahmutov/cypress-esbuild-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: "**/*.feature",
    async 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",
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

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

and I then try to launch the Cypress GUI I get

Even though I do have a support file (it's within the src folder.

This happens any time I try to change the config file and I remove that preset function.

Could someone please help me understand this?

• [ ] Reporting a typo
• [ ] Reporting a documentation bug
• [ ] Documentation improvement
• [ ] Documentation feedback

Is there a specific documentation page you are reporting?

Enter the URL or documentation section here.

Additional context or description

Please see above.

[barbados-clemens]

by default cypress is looking for a supportFile, if you don't have one then pass false as the property.

See more in the docs: https://docs.cypress.io/guides/references/configuration#e2e

I'd also recommend just extending the default config as such

import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import { createBundler } from "@bahmutov/cypress-esbuild-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    ...nxE2EPreset(__filename), // default options
    supportFile: false, // tell cypress you don't have a support file
    baseUrl: 'http://localhost:3000',
    specPattern: "**/*.feature",
    async 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",
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

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

[barbados-clemens]

closing as it seems like everyone on the issue approved of the comment and there hasn't been a response in a while.

[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.