docs: document mode argument to plugins

content/_data/en.json

@@ -222,6 +222,7 @@
  "configuration-api": "Configuration",
  "version": "version",
  "arch": "arch",
+ "testing-type": "testingType",
  "browser": "browser",
  "platform": "platform",
  "selector-playground-api": "SelectorPlayground",

content/_data/sidebar.json

@@ -207,6 +207,7 @@
  "cypress-log": "cypress-log.html",
  "platform": "platform.html",
  "spec": "spec.html",
+ "testing-type": "testing-type.html",
  "version": "version.html"
  },
  "plugins": {

content/api/cypress-api/testing-type.md

@@ -0,0 +1,39 @@
+---
+title: Cypress.testingType
+---
+
+`Cypress.testingType` returns the current testing type, determined by the test runner. It is either `e2e` for the regular Cypress test runner, or `component` for experimental [Component Testing](guides/component-testing/introduction).
+
+## Syntax
+
+```javascript
+Cypress.testingType // returns 'e2e' or 'component'
+```
+
+## Examples
+
+### Testing Type
+
+```javascript
+it('is running experimental component testing mode', () => {
+ expect(Cypress.testingType).to.be.equal('component')
+})
+```
+
+### Conditionals
+
+```javascript
+it('does something differently', () => {
+ if (Cypress.testingType === 'e2e') {
+ cy.exec('something')
+ } else {
+ cy.exec('something else')
+ }
+})
+```
+
+## History
+
+| Version | Changes |
+| ------------------------------------- | ------------------- |
+| [7.0.0](/guides/references/changelog) | Added `testingType` |

content/api/plugins/configuration-api.md

@@ -10,8 +10,8 @@ To modify configuration, you return an object from your plugins file exported fu
 
 ```javascript
 // cypress/plugins/index.js
-module.exports = (on, config) => {
- console.log(config) // see what all is in here!
+module.exports = (on, config, mode) => {
+ console.log(config) // see everything in here!
 
  // modify config values
  config.defaultCommandTimeout = 10000
@@ -62,7 +62,7 @@ In the plugins file, you can filter the list of browsers passed inside the `conf
 
 ```javascript
 // cypress/plugins/index.js
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
  // inside config.browsers array each object has information like
  // {
  // name: 'chrome',
@@ -114,7 +114,7 @@ function getConfigurationByFile(file) {
 }
 
 // plugins file
-module.exports = (on, config) => {
+module.exports = (on, config, mode) => {
  // accept a configFile value or use development by default
  const file = config.env.configFile || 'development'
 
@@ -198,3 +198,27 @@ This would enable you to do things like this:
 This is a less complicated example. Remember - you have the full power of Node at your disposal.
 
 How you choose to edit the configuration is up to you. You don't have to read off of the file system - you could store them all in memory inside of your `pluginsFile` if you wanted.
+
+### Runner Specific Plugins
+
+The exported function from the plugins file receives three arguments. The third argument is `mode`, which is either `e2e` or `component` depending on if the E2E or [Component Testing](/guides/component-testing/introduction/) runner was launched. This allows you to configure runner specific plugins.
+
+#### Use Cypress React Plugin Conditionally
+
+Conditionally apply the Cypress React Plugin if launching in Component Testing mode:
+
+```js
+module.exports = (on, config) => {
+ if (config.testingType === 'component') {
+ require('@cypress/react/plugins/react-scripts')(on, config)
+ }
+
+ return config
+}
+```
+
+## History
+
+| Version | Changes |
+| ------------------------------------- | ----------------------------------------- |
+| [7.0.0](/guides/references/changelog) | Added `testingType` property to `config`. |

content/guides/references/configuration.md

@@ -178,6 +178,36 @@ For more complex configuration objects, you may want to consider passing a [JSON
 cypress open --config '{"watchForFileChanges":false,"testFiles":["**/*.js","**/*.ts"]}'
 ```
 
+### Runner Specific Overrides
+
+You can override configuration for either the E2E or [Component Testing](/guides/component-testing/introduction/) runner using the `e2e` and `component` options.
+
+#### Examples
+
+Component Testing specific viewports in configuration file (`cypress.json` by default):
+
+```json
+{
+ "viewportHeight": 600,
+ "viewportWidth": 1000,
+ "component": {
+ "viewportHeight": 500,
+ "viewportWidth": 500
+ }
+}
+```
+
+E2E specific timeouts in configuration file (`cypress.json` by default):
+
+```json
+{
+ "defaultCommandTimeout": 5000,
+ "e2e": {
+ "defaultCommandTimeout": 10000
+ }
+}
+```
+
 ### Plugins
 
 You can programmatically modify configuration values using Node within the `pluginsFile`. This enables you to do things like:
@@ -517,6 +547,7 @@ DEBUG=cypress:cli,cypress:server:specs
 
 | Version | Changes |
 | -------------------------------------------- | ------------------------------------------------------- |
+| [7.0.0](/guides/references/changelog) | Added `e2e` and `component` options. |
 | [6.1.0](/guides/references/changelog#6-1-0) | Added option `scrollBehavior` |
 | [5.2.0](/guides/references/changelog#5-2-0) | Added `includeShadowDom` option. |
 | [5.0.0](/guides/references/changelog) | Added `retries` configuration. |

content/guides/tooling/plugins-guide.md

@@ -159,7 +159,7 @@ Plugins from our [official list](/plugins/plugins/index) are npm modules. This e
 You can install any published plugin using NPM:
 
 ```shell
-npm install <plugin name> --save-dev
+npm install <plugin name> --save-dev
 ```
 
 ## Using a plugin

cypress/integration/api.spec.js

@@ -74,6 +74,7 @@ describe('APIs', () => {
  'cypress-log': 'Cypress.log',
  platform: 'Cypress.platform',
  spec: 'Cypress.spec',
+ 'testing-type': 'Cypress.testingType',
  version: 'Cypress.version',
  'configuration-api': 'Configuration API',
  'preprocessors-api': 'Preprocessors API',