describe how to use your own babelrc (#78)

Author: bahmutov

.eslintignore

@@ -6,4 +6,6 @@ examples/react-app/node_modules
 examples/react-app/build
 examples/react-app/package.json
 examples/react-app/cypress/integration/dynamic-import-spec.js
+# contains nullish operator
+examples/use-babelrc/cypress/integration/spec.js
 *.ts

README.md

@@ -51,7 +51,7 @@ module.exports = (on) => {
 Pass in options as the second argument to `webpack`:
 
 ```javascript
-const webpack = require('@cypress/webpack-preprocessor')
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 
 module.exports = (on) => {
   const options = {
@@ -61,7 +61,7 @@ module.exports = (on) => {
     watchOptions: {},
   }
 
-  on('file:preprocessor', webpack(options))
+  on('file:preprocessor', webpackPreprocessor(options))
 }
 ```
 
@@ -92,6 +92,19 @@ Object of webpack options. Just `require` in the options from your `webpack.conf
 
 Source maps are always enabled unless explicitly disabled by specifying `devtool: false`.
 
+### use babelrc
+
+If you have a `.babelrc` file and would like to use it, then you must delete `options.presets` from the default Webpack options
+
+```js
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const defaults = webpackPreprocessor.defaultOptions
+module.exports = (on) => {
+  delete defaults.webpackOptions.module.rules[0].use[0].options.presets
+  on('file:preprocessor', webpackPreprocessor(defaults))
+}
+```
+
 ### watchOptions
 
 Object of options for watching. See [webpack's docs](https://webpack.js.org/configuration/watch).

circle.yml

@@ -46,13 +46,24 @@ workflows:
           no-workspace: true
           working_directory: examples/react-app
 
+      - cypress/run:
+          name: Test babelrc
+          requires:
+            - Install
+          executor: cypress/base-12-14-0
+          install-command: echo 'Nothing else to install in this job'
+          timeout: '1m'
+          no-workspace: true
+          working_directory: examples/use-babelrc
+
       # wait for all jobs to finish and possible run NPM release
       - cypress/run:
           name: NPM release
           requires:
             - Install
             - Tests
             - Test React App
+            - Test babelrc
           executor: cypress/base-12-14-0
           # nothing to install - cypress/install job does it
           # and nothing to pass to the next job

examples/use-babelrc/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
+}

examples/use-babelrc/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "env": {
+    "cypress/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:cypress/recommended"
+  ],
+  "plugins": ["cypress"]
+}

examples/use-babelrc/README.md

@@ -0,0 +1,19 @@
+# use-babelrc
+
+> Transpiling specs using local .babelrc file
+
+The [cypress/integration/spec.js](cypress/integration/spec.js) uses null coalescing operator `??`, which needs a [separate plugin](https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator) for Babel to transpile it.
+
+```js
+it('handles nullish operator', () => {
+  const data = {
+    person: {
+      firstName: 'Joe'
+    }
+  }
+  const name = data.person.firstName ?? 'Anonymous'
+  expect(name).to.equal('Joe')
+})
+```
+
+There is a local [.babelrc](.babelrc) file, and to make Cypress preprocessor use it, the [cypress/plugins/index.js](cypress/plugins/index.js) removes Babel presets from the default options.

examples/use-babelrc/cypress.json

@@ -0,0 +1,4 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false
+}

examples/use-babelrc/cypress/integration/spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+describe('Use .babelrc', () => {
+  it('handles nullish operator', () => {
+    const data = {
+      person: {
+        firstName: 'Joe'
+      }
+    }
+    const name = data.person.firstName ?? 'Anonymous'
+    expect(name).to.equal('Joe')
+  })
+})

examples/use-babelrc/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+const webpackPreprocessor = require('../../../..')
+const defaults = webpackPreprocessor.defaultOptions
+
+module.exports = (on) => {
+  delete defaults.webpackOptions.module.rules[0].use[0].options.presets
+  on('file:preprocessor', webpackPreprocessor(defaults))
+}

examples/use-babelrc/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "use-babelrc",
+  "version": "1.0.0",
+  "description": "Transpiling specs using local .babelrc file",
+  "private": true,
+  "scripts": {
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "test": "../../node_modules/.bin/cypress run"
+  },
+  "license": "ISC",
+  "author": "",
+  "keywords": []
+}

package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
     "@babel/preset-env": "^7.0.0",
     "@cypress/eslint-plugin-dev": "5.0.0",
     "@typescript-eslint/eslint-plugin": "2.27.0",