feat: add babelrc preprocessor, closes #149

Author: bahmutov

docs/recipes.md

@@ -17,7 +17,8 @@ If you are using Create-React-App v3 or `react-scripts`, and want to reuse the b
 ```json
 {
   "pluginsFile": "node_modules/cypress-react-unit-test/plugins/cra-v3",
-  "supportFile": "node_modules/cypress-react-unit-test/support"
+  "supportFile": "node_modules/cypress-react-unit-test/support",
+  "experimentalComponentTesting": true
 }
 ```
 
@@ -53,8 +54,43 @@ If you have your own webpack config, you can use included plugins file to load i
 ```json
 {
   "pluginsFile": "node_modules/cypress-react-unit-test/plugins/load-webpack",
+  "experimentalComponentTesting": true,
   "env": {
     "webpackFilename": "demo/config/webpack.dev.js"
   }
 }
 ```
+
+## Your `.babelrc` file
+
+If you are using Babel without Webpack to transpile, you can use the plugin that tells Babel loader to use your configuration file. In `cypress.json` file set:
+
+```json
+{
+  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/babelrc",
+  "supportFile": "node_modules/cypress-react-unit-test/support",
+  "experimentalComponentTesting": true
+}
+```
+
+**Bonus:** in order to enable code instrumentation, add the `babel-plugin-istanbul` (included in this plugin) to your `.babelrc` setup. You can place it under `test` environment to avoid instrumenting production code. Example `.babelrc` config file that you can execute with `BABEL_ENV=test npx cypress open`
+
+```json
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    {
+      "plugins": ["@babel/plugin-proposal-class-properties"]
+    },
+    "@emotion/babel-preset-css-prop"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["babel-plugin-istanbul"]
+    }
+  }
+}
+```
+
+See [bahmutov/react-loading-skeleton](https://github.com/bahmutov/react-loading-skeleton) example

plugins/babelrc/file-preprocessor.js

@@ -0,0 +1,52 @@
+// @ts-check
+// uses webpack to load your .babelrc file
+const debug = require('debug')('cypress-react-unit-test')
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const { addImageRedirect } = require('../utils/add-image-redirect')
+
+// note: modifies the input object
+function enableBabelrc(webpackOptions) {
+  if (!Array.isArray(webpackOptions.module.rules)) {
+    debug('could not find webpack module rules %o', webpackOptions.module)
+    return
+  }
+
+  const jsCodeRule = webpackOptions.module.rules[0]
+  debug('js code rule %o', jsCodeRule)
+  if (!jsCodeRule) {
+    debug('could not get first rule %o', webpackOptions.module)
+    return
+  }
+
+  const jsCodeRuleUses = jsCodeRule.use
+  if (!Array.isArray(jsCodeRuleUses)) {
+    debug('js code rule use is not an array %o', jsCodeRuleUses)
+    return
+  }
+  const babelLoaderOptions = jsCodeRuleUses[0].options
+  debug('Babel options %o', babelLoaderOptions)
+  if (!babelLoaderOptions) {
+    debug('Hmm, no babel loader options %o', jsCodeRuleUses)
+    return
+  }
+
+  // by deleting our default presets list
+  // we allow Babel loader to load the presets and plugins
+  // from the project's .babelrc file
+  delete babelLoaderOptions.presets
+}
+
+module.exports = config => {
+  debug('env object %o', config.env)
+
+  const coverageIsDisabled =
+    config && config.env && config.env.coverage === false
+  debug('coverage is disabled? %o', { coverageIsDisabled })
+
+  const wpPreprocessorOptions = webpackPreprocessor.defaultOptions
+  enableBabelrc(wpPreprocessorOptions.webpackOptions)
+
+  addImageRedirect(wpPreprocessorOptions.webpackOptions)
+
+  return webpackPreprocessor(wpPreprocessorOptions)
+}

plugins/babelrc/index.js

@@ -0,0 +1,9 @@
+const filePreprocessor = require('./file-preprocessor')
+
+module.exports = (on, config) => {
+  require('@cypress/code-coverage/task')(on, config)
+  on('file:preprocessor', filePreprocessor(config))
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

plugins/cra-v3/file-preprocessor.js

@@ -17,7 +17,7 @@ const getWebpackOptions = opts => {
   }
   debug('webpack options: %o', webpackOptions)
   findWebpack.cleanForCypress(opts, webpackOptions)
-  debug('claned webpack options: %o', webpackOptions)
+  debug('cleaned webpack options: %o', webpackOptions)
 
   addImageRedirect(webpackOptions)