feat: support cypress.js for config

[lmiller1990]

User facing changelog

You may now write your configuration in a JS file. The specifics were discussed in this ticket and summarized in this ticket.

This resolves #5218.

The motivation here is two-fold:

1. JS is more powerful/flexible than JSON for config.
2. From 7.0, we will have the component testing runner. Some e2e defaults don't make much sense for component testing (eg: viewport height/width, component testing specific environment variables/plugin configuration).

This PR adds support for declaring config via a cypress.js file, but also supports different defaults depending on the runner you are using.

This new configuration is purely additive - cypress.json is the default and will be prioritized if it is found.

Read on for more.

Before (cypress.json)

{
  "video": false
}

After: (cypress.js by default, but only used if cypress.json is not found)

module.exports = {
  video: false
}

If both cypress.js and cypress.json are found, we default to cypress.json.

This means if existing users would like to use the new cypress.js configuration, all they need to do is mv cypress.json cypress.js and wrap their config in module.exports = { /* config */ }.

In addition, you may also configure separate files for runner specific configuration. The default file names are:

• cypress.component.config.js for CT runner
• cypress.e2e.config.js for the e2e runner

Cypress will figure out which one to use based on how you launch Cypress. If you launch with open-ct, run-ct or using the --experimentalComponentTesting flag, we will use cypress.component.config.js if is exists. Otherwise, use cypress.e2e.config.js.

Finally, we also support declaring configuration in single cypress.js file. In this case, you can configure it with two keys: e2e and component.

module.exports = {
  e2e: {
    video: false
  },
  component: {
    video: true
  }
}

This is neat, since you can easily share some base defaults:

const config = {
  // various
}

module.exports = {
  e2e: config,
  component: {
    ...config,
    viewportWidth: 500,
    viewportHeight: 500
  }
}

... or ...

module.exports = {
  e2e: require('./cypress/e2e.config.js'),
  component: {
    ...require('./cypress/e2e.config.js'),
    viewportWidth: 500,
    viewportHeight: 500
  }
}

etc.

Additional details

This change is necessary since e2e and component testing have different requirements. An example might be in e2e tests, having a default viewport of 660x1000 might make sense, but for a component testing, it's likely something smaller such as 500x500 might be a more useful default.

Furthermore, using JS for configuration is far more powerful and flexible than JSON. In the long run, we could also support TS natively, and then users could get strongly typed configuration for a better DX!

How has the user experience changed?

No change required - cypress.json is prioritized by default. You can opt-in to the new cypress.js or runner specific configuration files.

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub? No. This needs to be done.
• Has a PR for user-facing changes been opened in cypress-documentation? Not yet. I will do this before marking "ready for review". I am tracking that here.
• Have API changes been updated in the type definitions Not required.
• Have new configuration options been added to the [cypress.schema.json] Need to do this

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

4107 • 0 • 53 • 1 • 0

---

Run details

Project	cypress
Status	Passed
Commit	e4a7b63
Started	Jun 16, 2021 10:05 PM
Ended	Jun 16, 2021 10:16 PM
Duration	10:41 💡
OS	Linux Debian - 10.8
Browser	Firefox 88

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[github-actions]

Internal Jira issue: TR-691

[jennifer-shehane]

@lmiller1990 This will close this issue if you can tag it #5218

[flotwig]

I don't think we need cypress.component.config.js and cypress.e2e.config.js, it seems to duplicate the functionality of having the e2e and component keys, and as you note users could just do { e2e: require('cypress.e2e.config.js') } from their cypress.js anyways

[jennifer-shehane]

@lmiller1990 Josh is going to set up a meeting soon to discuss the implementation of this with some of the TR team so we can more quickly review.

[lmiller1990]

@jennifer-shehane thanks, I added a resolves #5218. I will sync w/ Josh to get this meeting organized.
@flotwig I think you are right, maybe got a bit too excited 😓

[lmiller1990]

Slightly changed how/when this will be implemented. First stage is to upgrade cypress.json and plugins/index.js. Eventually these two will merge into a cypress.config.js file.

Follow up PR: #15444