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

.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",