feat(@cypress/react): Make correct plugins for different adapters/bundlers (#15337)

* Remove unused stuff

* Fix eslint errors

* Use local cypress running script

* Fix dependency resolution

* Revert "Fix dependency resolution"

This reverts commit 01a70be.

* Add @cypress/react CI

* Properly resolve @types pacakges

* Run tests with mocha

* Fix cypress tests

* Fix or skip some specs

* Add retries to the card-spec.js

* Remove jest mocks

* Run e2e examples on CI

* Fix yarn cache key

* Fix e2e examples jobs

* Rename cypress-react-unit-test with @cypress/react

* Fix circleci.yml

* Revert "Fix e2e examples jobs"

This reverts commit efcc7c4.

* Revert " Rename cypress-react-unit-test with @cypress/react"

This reverts commit 4febfcc.

* Replce cypress-react-unit-test with @cypress/react

* Persist build artifacts

* Fix working directory paths circle.yml

* Fix more CI

* adding yarn.lock files

* Make package.json for  folder

* Remove .npmrc

* Update circle.yml

* Remove unused files

* Copy plugins files to the "dist" folder

* Fix links to the github repos

* Move init wizard from npm/react/init to npm/wizard

* Move init wizard from npm/react/init to npm/wizard

* Implement initial vue template

* Run wizard tests on CI

* Refactor continue: bool to success: bool for better code readability

* Fix circleci.yml

* Use only absolute paths for tests

* Stub process.exit calls

* Remove useless comments

* Add installation cypress to the wizard logic

* More improvements

* Include packages/examples/cypress into git

* Commit new files

* Use packages/example as SST for generated files

* Last improvements for wizard

* Update packages/server/lib/scaffold.js

* Rename wizard to create-cypress-tests

* Fix circleci config

* Fix snapshot tests

* Run all create-cypress-tests on ci

* Do not install plugins and scaffold files from kitchensink

* Ignore integration/examples folder for packages/example

* Run create-cypress-tests-tests on CI

* Add copy example cross-platform script

* Use copy example script in tests

* feat: create-cypress-tests auto-inject config (#9116)

* Implement the basic babel code transformation for configs

* Add more tests for edge-cases

* Add snapshot tests for autogenerated code for each template

* Add git status guard

* Add git status guard

* Fix last test

* Fix tests

* Revert changes for packages/example

* Revert changes for packages/example/tsconfig.json

* Prepeare package for the release

* Fix inquirer name

* v0.0.125

* v0.0.127

* v0.0.128

* v0.0.130

* v0.0.131

* Add more UX features

* Add vue-cli template

* Make src as default folder for vue-cli template

* Revert dev-time changes

* Run appveyour windows build

* Run full appveyour build

* Fix circle.yml

* Update plugins

* Join paths for windows

* Revert example/lib changes

* Fix tests

* Revert unnecessary changes

* Implement dev-server dependency installation

* Update npm/create-cypress-tests/README.md

* Properly exit process if react tests failed

* Fix circleci reporter not found

* Update nextjs plugin

* react-scripts plugin for dev-server

* Implement webpack-file plugin support

* v0.0.502

* v0.0.503

* Implement rollup support

* Implement babel plugin

* Update webpack options

* Fix nextjs plugin

* Unmount components in beforeEach to prevent side-effects

* Rename preprocessor to injectDevServer

* Fix next.js example

* Fix webpack-options exampel

* Reproduce rollup problem

* Update create-cypress-tests snapshots

* Do not run examples/rollup

* Uncomment test

* Change paralllelism

* Remove useless checks

* Update snapshots

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>

Author: dmtrKovalenko

.gitignore

@@ -7,6 +7,7 @@ build
 .publish
 _test-output
 cypress.zip
+.babel-cache
 
 # from extension
 Cached Theme.pak

circle.yml

@@ -1108,7 +1108,7 @@ jobs:
 
   npm-react:
     <<: *defaults
-    parallelism: 9
+    parallelism: 8
     steps:
       - attach_workspace:
           at: ~/

npm/create-cypress-tests/__snapshots__/babel.test.ts.js

@@ -1,10 +1,10 @@
 exports['babel installation template correctly generates plugins config 1'] = `
-const preprocessor = require('@cypress/react/plugins/babel');
+const injectDevServer = require('@cypress/react/plugins/babel');
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 `

npm/create-cypress-tests/__snapshots__/init-component-testing.test.ts.js

@@ -1,18 +1,18 @@
 exports['Injects guessed next.js template cypress.json'] = `
-const preprocessor = require("@cypress/react/plugins/next");
+const injectDevServer = require("@cypress/react/plugins/next");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 
 `
 
 exports['Injects guessed next.js template plugins/index.js'] = `
-const preprocessor = require("@cypress/react/plugins/next");
+const injectDevServer = require("@cypress/react/plugins/next");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 
@@ -24,20 +24,20 @@ import "@cypress/react/support";
 `
 
 exports['Injected overridden webpack template cypress.json'] = `
-const preprocessor = require("@cypress/react/plugins/react-scripts");
+const injectDevServer = require("@cypress/react/plugins/react-scripts");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 
 `
 
 exports['Injected overridden webpack template plugins/index.js'] = `
-const preprocessor = require("@cypress/react/plugins/react-scripts");
+const injectDevServer = require("@cypress/react/plugins/react-scripts");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 

npm/create-cypress-tests/__snapshots__/next.test.ts.js

@@ -1,10 +1,10 @@
 exports['next.js install template correctly generates plugins config 1'] = `
-const preprocessor = require('@cypress/react/plugins/next');
+const injectDevServer = require('@cypress/react/plugins/next');
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 `

npm/create-cypress-tests/__snapshots__/react-scripts.test.ts.js

@@ -1,10 +1,10 @@
 exports['create-react-app install template correctly generates plugins config 1'] = `
-const preprocessor = require('@cypress/react/plugins/react-scripts');
+const injectDevServer = require('@cypress/react/plugins/react-scripts');
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 `

npm/create-cypress-tests/__snapshots__/reactWebpackFile.test.ts.js

@@ -1,24 +1,24 @@
 exports['webpack-file install template correctly generates plugins config when webpack config path is missing 1'] = `
-const preprocessor = require("@cypress/react/plugins/load-webpack");
+const injectDevServer = require("@cypress/react/plugins/load-webpack");
 
 const something = require("something");
 
 module.exports = (on, config) => {
   // TODO replace with valid webpack config path
   config.env.webpackFilename = './webpack.config.js';
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 `
 
 exports['webpack-file install template correctly generates plugins config when webpack config path is provided 1'] = `
-const preprocessor = require("@cypress/react/plugins/load-webpack");
+const injectDevServer = require("@cypress/react/plugins/load-webpack");
 
 const something = require("something");
 
 module.exports = (on, config) => {
   config.env.webpackFilename = 'config/webpack.config.js';
-  preprocessor(on, config);
+  injectDevServer(on, config);
   return config; // IMPORTANT to return the config object
 };
 `

npm/create-cypress-tests/__snapshots__/rollup.test.ts.js

@@ -1,32 +1,40 @@
 exports['rollup-file install template correctly generates plugins config when webpack config path is missing 1'] = `
-const rollupPreprocessor = require("@bahmutov/cy-rollup");
+const path = require("path");
+
+const {
+  startDevServer
+} = require("@cypress/rollup-dev-server");
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  on('file:preprocessor', rollupPreprocessor({
-    // TODO replace with valid rollup config path
-    configFile: 'rollup.config.js'
-  }));
-
-  require('@cypress/code-coverage/task')(on, config);
-
+  on("dev-server:start", async options => {
+    return startDevServer({
+      options,
+      // TODO replace with valid rollup config path
+      rollupConfig: path.resolve(__dirname, 'rollup.config.js')
+    });
+  });
   return config; // IMPORTANT to return the config object
 };
 `
 
 exports['rollup-file install template correctly generates plugins config when webpack config path is provided 1'] = `
-const rollupPreprocessor = require("@bahmutov/cy-rollup");
+const path = require("path");
+
+const {
+  startDevServer
+} = require("@cypress/rollup-dev-server");
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  on('file:preprocessor', rollupPreprocessor({
-    configFile: 'config/rollup.config.js'
-  }));
-
-  require('@cypress/code-coverage/task')(on, config);
-
+  on("dev-server:start", async options => {
+    return startDevServer({
+      options,
+      rollupConfig: path.resolve(__dirname, 'config/rollup.config.js')
+    });
+  });
   return config; // IMPORTANT to return the config object
 };
 `

npm/create-cypress-tests/__snapshots__/vueCli.test.ts.js

@@ -1,10 +1,10 @@
 exports['vue webpack-file install template correctly generates plugins for vue-cli-service 1'] = `
-const preprocessor = require("@cypress/vue/dist/plugins/webpack");
+const injectDevServer = require("@cypress/vue/dist/plugins/webpack");
 
 const something = require("something");
 
 module.exports = (on, config) => {
-  preprocessor(on, config); // IMPORTANT return the config object
+  injectDevServer(on, config); // IMPORTANT return the config object
 
   return config;
 };

npm/create-cypress-tests/__snapshots__/webpackOptions.test.ts.js

@@ -1,5 +1,9 @@
 exports['webpack-options template correctly generates plugins config 1'] = `
-const webpackPreprocessor = require("@cypress/webpack-preprocessor");
+const path = require("path");
+
+const {
+  startDevServer
+} = require("@cypress/webpack-dev-Server");
 
 const something = require("something");
 
@@ -15,13 +19,13 @@ module.exports = (on, config) => {
       publicPath: '/',
       chunkFilename: '[name].bundle.js'
     },
-    // TODO: update with valid configuration for your app
+    // TODO: update with valid configuration for your components
     module: {
       rules: [{
         test: /\\.(js|jsx|mjs|ts|tsx)$/,
         loader: 'babel-loader',
-        options: { ...babelConfig,
-          cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache')
+        options: {
+          cacheDirectory: path.resolve(__dirname, '.babel-cache')
         }
       }]
     }

npm/create-cypress-tests/src/component-testing/templates/react/babel.ts

@@ -11,13 +11,13 @@ export const BabelTemplate: Template = {
     'webpack',
   )} to bundle the components for testing.`,
   recommendedComponentFolder: 'cypress/component',
-  dependencies: ['@cypress/webpack-dev-server'],
+  dependencies: ['webpack', '@cypress/webpack-dev-server'],
   getExampleUrl: () => 'https://github.com/cypress-io/cypress/tree/develop/npm/react/examples/babel',
   getPluginsCodeAst: () => {
     return {
-      Require: babel.template.ast('const preprocessor = require(\'@cypress/react/plugins/babel\')'),
+      Require: babel.template.ast('const injectDevServer = require(\'@cypress/react/plugins/babel\')'),
       ModuleExportsBody: babel.template.ast([
-        'preprocessor(on, config)',
+        'injectDevServer(on, config)',
         'return config // IMPORTANT to return the config object',
       ].join('\n'), { preserveComments: true }),
     }

npm/create-cypress-tests/src/component-testing/templates/react/next.ts

@@ -13,9 +13,9 @@ export const NextTemplate: Template = {
   dependencies: ['@cypress/webpack-dev-server'],
   getPluginsCodeAst: () => {
     return {
-      Require: babel.template.ast('const preprocessor = require(\'@cypress/react/plugins/next\')'),
+      Require: babel.template.ast('const injectDevServer = require(\'@cypress/react/plugins/next\')'),
       ModuleExportsBody: babel.template.ast([
-        'preprocessor(on, config)',
+        'injectDevServer(on, config)',
         'return config // IMPORTANT to return the config object',
       ].join('\n'), { preserveComments: true }),
     }

npm/create-cypress-tests/src/component-testing/templates/react/react-scripts.ts

@@ -16,9 +16,9 @@ export const ReactScriptsTemplate: Template = {
   },
   getPluginsCodeAst: () => {
     return {
-      Require: babel.template.ast('const preprocessor = require(\'@cypress/react/plugins/react-scripts\')'),
+      Require: babel.template.ast('const injectDevServer = require(\'@cypress/react/plugins/react-scripts\')'),
       ModuleExportsBody: babel.template.ast([
-        'preprocessor(on, config)',
+        'injectDevServer(on, config)',
         'return config // IMPORTANT to return the config object',
       ].join('\n'), { preserveComments: true }),
     }

npm/create-cypress-tests/src/component-testing/templates/react/reactWebpackFile.ts

@@ -18,13 +18,13 @@ export const WebpackTemplate: Template<{ webpackConfigPath: string }> = {
       : './webpack.config.js'
 
     return {
-      Require: babel.template.ast('const preprocessor = require("@cypress/react/plugins/load-webpack")'),
+      Require: babel.template.ast('const injectDevServer = require("@cypress/react/plugins/load-webpack")'),
       ModuleExportsBody: babel.template.ast([
         includeWarnComment
           ? '// TODO replace with valid webpack config path'
           : '',
         `config.env.webpackFilename = '${webpackConfigPath}'`,
-        'preprocessor(on, config)',
+        'injectDevServer(on, config)',
         'return config // IMPORTANT to return the config object',
       ].join('\n'), { preserveComments: true }),
     }

npm/create-cypress-tests/src/component-testing/templates/react/rollup.ts

@@ -21,7 +21,7 @@ export function extractRollupConfigPathFromScript (script: string) {
 
 export const RollupTemplate: Template<{ rollupConfigPath: string }> = {
   message:
-    'It looks like you have custom `rollup.config.js`. We can use it to bundle the components for testing.',
+    'It looks like you have custom `rollup.config.js`. We can use it to bundle components for testing.',
   getExampleUrl: () => {
     return 'https://github.com/cypress-io/cypress/tree/develop/npm/react/examples/rollup'
   },
@@ -34,19 +34,21 @@ export const RollupTemplate: Template<{ rollupConfigPath: string }> = {
       : 'rollup.config.js'
 
     return {
-      Require: babel.template.ast('const rollupPreprocessor = require("@bahmutov/cy-rollup")'),
+      Require: babel.template.ast([
+        'const path = require("path")',
+        'const { startDevServer } = require("@cypress/rollup-dev-server")',
+      ].join('\n')),
       ModuleExportsBody: babel.template.ast([
-        `on(`,
-        `  'file:preprocessor',`,
-        `  rollupPreprocessor({`,
+        `on("dev-server:start", async (options) => {`,
+        `  return startDevServer({`,
+        `    options,`,
         includeWarnComment
-          ? '      // TODO replace with valid rollup config path'
+          ? ' // TODO replace with valid rollup config path'
           : '',
-        `    configFile: '${rollupConfigPath}',`,
-        `  }),`,
-        `)`,
+        `    rollupConfig: path.resolve(__dirname, '${rollupConfigPath}'),`,
+        `  })`,
+        `})`,
         ``,
-        `require('@cypress/code-coverage/task')(on, config)`,
         `return config // IMPORTANT to return the config object`,
       ].join('\n'), { preserveComments: true }),
     }

npm/create-cypress-tests/src/component-testing/templates/react/webpack-options-module-exports.template.js

@@ -9,13 +9,13 @@ const webpackConfig = {
     publicPath: '/',
     chunkFilename: '[name].bundle.js',
   },
-  // TODO: update with valid configuration for your app
+  // TODO: update with valid configuration for your components
   module: {
     rules: [
       {
         test: /\.(js|jsx|mjs|ts|tsx)$/,
         loader: 'babel-loader',
-        options: { ...babelConfig, cacheDirectory: path.resolve(__dirname, '..', '..', '.babel-cache') },
+        options: { cacheDirectory: path.resolve(__dirname, '.babel-cache') },
       },
     ]
   },

npm/create-cypress-tests/src/component-testing/templates/react/webpack-options.ts

@@ -12,10 +12,13 @@ export const WebpackOptions: Template = {
   },
   test: () => ({ success: false }),
   recommendedComponentFolder: 'src',
-  dependencies: ['@cypress/webpack-dev-server'],
+  dependencies: ['webpack', '@cypress/webpack-dev-server'],
   getPluginsCodeAst: () => {
     return {
-      Require: babel.template.ast('const webpackPreprocessor = require("@cypress/webpack-preprocessor")'),
+      Require: babel.template.ast([
+        'const path = require("path")',
+        'const { startDevServer } = require("@cypress/webpack-dev-Server")',
+      ].join('\n')),
       ModuleExportsBody: babel.template.ast(
         fs.readFileSync(path.resolve(__dirname, 'webpack-options-module-exports.template.js'), { encoding: 'utf-8' }),
         { preserveComments: true },

npm/create-cypress-tests/src/component-testing/templates/vue/vueCli.ts

@@ -11,10 +11,10 @@ export const VueCliTemplate: Template = {
   getPluginsCodeAst: () => {
     return {
       Require: babel.template.ast(
-        'const preprocessor = require("@cypress/vue/dist/plugins/webpack");',
+        'const injectDevServer = require("@cypress/vue/dist/plugins/webpack");',
       ),
       ModuleExportsBody: babel.template.ast([
-        'preprocessor(on, config);',
+        'injectDevServer(on, config);',
         '// IMPORTANT return the config object',
         'return config',
       ].join('\n'), { preserveComments: true }),

npm/react/cypress/plugins/index.js

@@ -61,7 +61,9 @@ const webpackConfig = {
  * @type Cypress.PluginConfig
  */
 module.exports = (on, config) => {
-  on('dev-server:start', (options) => startDevServer({ options, webpackConfig, disableLazyCompilation: false }))
+  on('dev-server:start', (options) => {
+    return startDevServer({ options, webpackConfig, disableLazyCompilation: false })
+  })
 
   return config
 }

npm/react/examples/a11y/package.json

@@ -3,8 +3,8 @@
   "description": "Testing component accessibility",
   "private": true,
   "scripts": {
-    "cy:open": "node ../../../../scripts/cypress open",
-    "test": "node ../../../../scripts/cypress run"
+    "cy:open": "node ../../../../scripts/cypress open-ct",
+    "test": "node ../../../../scripts/cypress run-ct"
   },
   "devDependencies": {
     "@cypress/react": "file:../../dist",