feat: allow usage of @react/plugins with cypress.config.js (#17738)

Author: Barthélémy Ledoux

cli/types/cypress.d.ts

@@ -5263,7 +5263,7 @@ declare namespace Cypress {
     tag?: string
   }
 
-  interface DevServerOptions {
+  interface DevServerConfig {
     specs: Spec[]
     config: ResolvedConfigOptions & RuntimeConfigOptions
     devServerEvents: NodeJS.EventEmitter
@@ -5282,7 +5282,7 @@ declare namespace Cypress {
     (action: 'before:spec', fn: (spec: Spec) => void | Promise<void>): void
     (action: 'before:browser:launch', fn: (browser: Browser, browserLaunchOptions: BrowserLaunchOptions) => void | BrowserLaunchOptions | Promise<BrowserLaunchOptions>): void
     (action: 'file:preprocessor', fn: (file: FileObject) => string | Promise<string>): void
-    (action: 'dev-server:start', fn: (file: DevServerOptions) => Promise<ResolvedDevServerConfig>): void
+    (action: 'dev-server:start', fn: (file: DevServerConfig) => Promise<ResolvedDevServerConfig>): void
     (action: 'task', tasks: Tasks): void
   }
 

npm/react/examples/a11y/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type Cypress.PluginConfig
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/craco/README.md

@@ -7,10 +7,10 @@ Use the plugin:
 
 // import your craco.config.js
 const cracoConfig = require('../../craco.config.js')
-const injectDevServer = require('@cypress/react/plugins/craco')
+const devServer = require('@cypress/react/plugins/craco')
 
 module.exports = (on, config) => {
-  injectDevServer(on, config, cracoConfig)
+  devServer(on, config, cracoConfig)
 
   return config
 }

npm/react/examples/craco/cypress/plugins/index.js

@@ -1,8 +1,13 @@
+// @ts-check
+
 const cracoConfig = require('../../craco.config.js')
-const injectDevServer = require('@cypress/react/plugins/craco')
+const devServer = require('@cypress/react/plugins/craco')
 
+/**
+ * @type Cypress.PluginConfig
+ */
 module.exports = (on, config) => {
-  injectDevServer(on, config, cracoConfig)
+  devServer(on, config, cracoConfig)
 
   return config
 }

npm/react/examples/find-webpack/README.md

@@ -38,10 +38,10 @@ Here we are adding some Component Testing specific options, hence the `"componen
 The last thing we need to is tell Cypress to use `@cypress/webpack-dev-server` for component tests. Plugins are explained in detail in the [Cypress documentation](https://docs.cypress.io/guides/tooling/plugins-guide#Installing-plugins). By default plugins are loaded from `cypress/plugins/index.js`. Create that file and add:
 
 ```js
-const injectDevServer = require("@cypress/react/plugins/react-scripts")
+const devServer = require("@cypress/react/plugins/react-scripts")
 
 module.exports = (on, config) => {
-  injectDevServer(on, config)
+  devServer(on, config)
   return config
 }
 ```

npm/react/examples/find-webpack/cypress/plugins/index.js

@@ -1,7 +1,12 @@
+// @ts-check
+
 const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
 const { startDevServer } = require('@cypress/webpack-dev-server')
 const _ = require('lodash')
 
+/**
+ * @type Cypress.PluginConfig
+ */
 module.exports = (on, config) => {
   const map = _.map([4, 8], (n) => n * 2)
 
@@ -10,9 +15,9 @@ module.exports = (on, config) => {
   const webpackConfig = findReactScriptsWebpackConfig(config)
 
   const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf
-  const babelRule = rules.find((rule) => /babel-loader/.test(rule.loader))
+  const babelRule = rules.find((rule) => typeof rule.loader === 'string' && /babel-loader/.test(rule.loader))
 
-  babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
+  typeof babelRule.options !== 'string' && babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
 
   on('dev-server:start', (options) => {
     return startDevServer({ options, webpackConfig })

npm/react/examples/nextjs-webpack-5/cypress/plugins.js

@@ -1,10 +1,10 @@
-const injectNextDevServer = require('@cypress/react/plugins/next')
+const devServer = require('@cypress/react/plugins/next')
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
-  injectNextDevServer(on, config)
+  devServer(on, config)
 
   return config
 }

npm/react/examples/nextjs/README.md

@@ -9,10 +9,10 @@
 In order to reuse next's webpack configuration and all the custom configuration defined in `next.config.js` connect special plugin in [plugin file](./cypress/plugins/index.js)
 
 ```js
-const preprocessor = require('@cypress/react/plugins/next')
+const devServer = require('@cypress/react/plugins/next')
 
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   return config
 }

npm/react/examples/nextjs/cypress/plugins/index.js

@@ -1,10 +1,10 @@
-const injectNextDevServer = require('@cypress/react/plugins/next')
+const devServer = require('@cypress/react/plugins/next')
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
-  injectNextDevServer(on, config)
+  devServer(on, config)
 
   return config
 }

npm/react/examples/react-scripts-folder/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/react-scripts-typescript/cypress/plugins/index.js

@@ -1,7 +1,10 @@
-const injectDevServer = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  injectDevServer(on, config)
+  devServer(on, config)
 
   return config
 }

npm/react/examples/react-scripts/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/sass-and-ts/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load Webpack file preprocessor that comes with this plugin
+// @ts-check
+
+// load Webpack file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const injectWebpackDevServer = require('@cypress/react/plugins/load-webpack')
+const devServer = require('@cypress/react/plugins/load-webpack')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  injectWebpackDevServer(on, config, {
+  devServer(on, config, {
     webpackFilename: 'webpack.config.js',
   })
 

npm/react/examples/snapshots/cypress/plugins/index.js

@@ -1,10 +1,15 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 const { initPlugin: initSnapshots } = require('cypress-plugin-snapshots/plugin')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
   // initialize the snapshots plugin following
   // https://github.com/meinaart/cypress-plugin-snapshots
   initSnapshots(on, config)

npm/react/examples/tailwind/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const injectReactScriptsDevServer = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  injectReactScriptsDevServer(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/using-babel-typescript/README.md

@@ -31,14 +31,14 @@ npm test
 
 ## Specs
 
-See spec files [src/\*.spec.js](src). The specs are bundled using [babel.config.js](babel.config.js) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file preprocessor.
+See spec files [src/\*.spec.js](src). The specs are bundled using [babel.config.js](babel.config.js) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file devServer.
 
 ```js
 // let's bundle spec files and the components they include using
 // the same bundling settings as the project by loading .babelrc
-const preprocessor = require('@cypress/react/plugins/babelrc')
+const devServer = require('@cypress/react/plugins/babel')
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config

npm/react/examples/using-babel-typescript/cypress/plugins/index.js

@@ -1,10 +1,15 @@
+// @ts-check
+
 // let's bundle spec files and the components they include using
 // the same bundling settings as the project by loading .babelrc
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const injectWebpackWithBabelDevServer = require('@cypress/react/plugins/babel')
+const devServer = require('@cypress/react/plugins/babel')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  injectWebpackWithBabelDevServer(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/using-babel/README.md

@@ -31,14 +31,14 @@ npm test
 
 ## Specs
 
-See spec files [src/\*.spec.js](src). The specs are bundled using [.babelrc](.babelrc) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file preprocessor
+See spec files [src/\*.spec.js](src). The specs are bundled using [.babelrc](.babelrc) settings via [cypress/plugins/index.js](cypress/plugins/index.js) file that includes file devServer
 
 ```js
 // let's bundle spec files and the components they include using
 // the same bundling settings as the project by loading .babelrc
-const preprocessor = require('@cypress/react/plugins/babelrc')
+const devServer = require('@cypress/react/plugins/babel')
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config

npm/react/examples/using-babel/cypress/plugins/index.js

@@ -1,10 +1,15 @@
+// @ts-check
+
 // let's bundle spec files and the components they include using
 // the same bundling settings as the project by loading .babelrc
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const injectWebpackWithBabelDevServer = require('@cypress/react/plugins/babel')
+const devServer = require('@cypress/react/plugins/babel')
 
+/**
+ * @type Cypress.PluginConfig
+ */
 module.exports = (on, config) => {
-  injectWebpackWithBabelDevServer(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/visual-sudoku/cypress/plugins/index.js

@@ -1,11 +1,16 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config)
-  preprocessor(on, config)
+  devServer(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config

npm/react/examples/visual-testing-with-applitools/cypress/plugins/index.js

@@ -1,13 +1,19 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config
 }
 
+// @ts-ignore
 require('@applitools/eyes-cypress')(module)

npm/react/examples/visual-testing-with-happo/cypress/plugins/index.js

@@ -1,11 +1,17 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
+// @ts-ignore
 const happoTask = require('happo-cypress/task')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
   on('task', happoTask)
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables

npm/react/examples/visual-testing-with-percy/cypress/plugins/index.js

@@ -1,9 +1,14 @@
-// load file preprocessor that comes with this plugin
+// @ts-check
+
+// load file devServer that comes with this plugin
 // https://github.com/bahmutov/@cypress/react#install
-const preprocessor = require('@cypress/react/plugins/react-scripts')
+const devServer = require('@cypress/react/plugins/react-scripts')
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
-  preprocessor(on, config)
+  devServer(on, config)
 
   // IMPORTANT to return the config object
   // with the any changed environment variables