Cypress config files should support "extends" option

[fr0]

Desired behavior:

TypeScript config files (tsconfig.json) allow the user to "extend" an existing file, e.g.:

tsconfig.json:

{
  "someOption": "value",
  "someOption2": "value2"
}

tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "someOption": "value3"
}

The end result is that the TypeScript compiler sees tsconfig.test.json as this:

{
  "someOption": "value3",
  "someOption2": "value2"
}

This allows the config files to remain DRY and avoid duplicating data, but still have multiple files for different scenarios.

Now that cypress has the --config-file option, I think cypress.json should support this too.

[pitgrap]

I like this. We wrote some function in our CypressPlugin.js to do this for us. Would be nice, if this is supported by default.

[stefanzmf]

@pitgrap is there any chance you could share the functionality you are talking about? thanks a lot.

[martinsik]

I would love this functionality too. Is this open for PRs?

[bahmutov]

If we implement #5941 then it would be simple for an external plugin to do this, see https://github.com/bahmutov/cypress-extends-example

[stevenvachon]

This is really needed.

I tried finding the file(s) that handle config parsing, but the source code was like spaghetti to me. So, I gave up on writing a PR and instead wrapped the CLI with a new and customized the config via a plugin. If anyone's interested in copying it for their own use:

• https://github.com/grafana/grafana/blob/master/packages/grafana-e2e/cli.js
• https://github.com/grafana/grafana/blob/master/packages/grafana-e2e/cypress/plugins/extendConfig.js

[mstruensee]

^^ same, this is something that would be useful, or allowing to do a js config file vs json only

[bahmutov]

I have implemented a userspace plugin to read configs that use extends and merge them, see https://github.com/bahmutov/cypress-extends

I have published a blog post describing it in action https://www.cypress.io/blog/2020/06/18/extending-the-cypress-config-file/

[mstruensee]

nice, but, this runs into an issue, when you want to change the pluginsFile name/location :D ...
well kind of ... pluginsFile needs to be in the base.config

[bahmutov]

Can I ask what is the issue @mstruensee ? That you point at a different plugins file or disable it completely?

[mstruensee]

We pointed to a different file, we don't use index.js because that has gotten overboard on project, and the project contained 100+ index.js files only.

We are trying to 1) clean up our root project folder, there are a ton of config files there, so any that we can pass the config location, we are moving to a config folder, 2) would be nice to have it do .js so we can easily made a module that contains only the base config and do something like this in a generator ...

import { config } from "@team/cypress"

module.exports = {
    ...config,
   overrides
}

your extends does that in the end, but the extends will have to point to a "node_modules/@team/cypress/base.config" location? ... or will it work like a jest extends where the module package.main points to the json?

using your extends, this is what I have so far ... which is OK to have in a generator ...

{
	"pluginsFile": "cypress/plugins/plugins.js",
	"extends": "./config/cypress.json"
}

still testing it to see if it will work for our use case :)

[mstruensee]

also, we changed the location of where the cypress files are located, and that needs to be in the base.json ... cannot be overridden in the extends :(

[bahmutov]

Seems @mstruensee your best best is to load the config yourself using plugins code, since the situation is so complex

[mstruensee]

yes, trying to, but I need to figure out how to lap into cypress load process ... by the time you get into plugins/index.js the config is already loaded

might be easiest to just set --config-file node_modules/some-shared-libary/config/cypress.json

[Camo30]

Unfortunately the plugin from @bahmutov doesn't work in my environment. This should work out of the box

[ling1726]

@bahmutov @jennifer-shehane An extra scenario where this would be useful: in Fluent UI we have a lerna monorepo. We would like each package to be responsible for its own cypress tests, but would like to have one place for test helpers and configurations. At the same time a package should be able to extend or override the base config.

It seems too heavy weight to create a completely new package in the monorepo just to share cypress utilities, if it's possible to do path extension

packages/
├── scripts/ cypress
│   ├── fixtures
│   ├── plugins
│   ├── support
│   ├── cypress.json // base
├── menu/
│   ├── package.json
│   ├── Menu.spec.ts
|   ├── cypress.json // extends root
└── button/
    ├── package.json
    ├── Button.spec.ts
    ├── cypress.json // etends root

[jennifer-shehane]

We're working on replacing the cypress.json config with a cypress.config.js file, that can be written in JavaScript to define config, so I think this makes this issue no longer relevant.

Issue: #5218
PR: #17000

[Hotell]

@jennifer-shehane curious why was this closed as nothing has been implemented/released yet? can we re-open to not confuse folks reading this ?

github will auto-close this, once proper solution was implemented/merged ( that will reference this issue ). thx

[martinsik]

@Hotell I think the last comment explains what's going to happen #5674 (comment)