feat: add babelrc helper script (#8)

* feat: add babelrc helper script

* add unit test

* print summary

Author: bahmutov

.circleci/config.yml

@@ -16,6 +16,8 @@ workflows:
             # to see live static HTML site
             - store_artifacts:
                 path: coverage
+            # print code coverage summary to the terminal
+            - run: npx nyc report
             # publish new version if necessary
             - run: npm run semantic-release
 

README.md

@@ -32,43 +32,41 @@ If your application is loaded Istanbul-instrumented source code, then the covera
 
 ![Coverage report](images/coverage.jpg)
 
-## Instrument unit tests
-
-If you test your application code directly from `specs` you might want to instrument them and combine unit test code coverage with any end-to-end code coverage (from iframe). You can easily instrument spec files using [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) for example. Put the following in `cypress/plugins/index.js` file to use `.babelrc` file
-
-```js
-const browserify = require('@cypress/browserify-preprocessor')
+That should be it!
 
-module.exports = (on, config) => {
-  on('task', require('cypress-istanbul/task'))
+## Instrument unit tests
 
-  // tell Cypress to use .babelrc when bundling spec code
-  const options = browserify.defaultOptions
-  options.browserifyOptions.transform[1][1].babelrc = true
-  on('file:preprocessor', browserify(options))
-}
-```
+If you test your application code directly from `specs` you might want to instrument them and combine unit test code coverage with any end-to-end code coverage (from iframe). You can easily instrument spec files using [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) for example.
 
 Install the plugin
 
 ```
 npm i -D babel-plugin-istanbul
 ```
 
-and set in your `.babelrc` file
+Set your `.babelrc` file
 
 ```rc
 {
   "plugins": ["istanbul"]
 }
 ```
 
+Put the following in `cypress/plugins/index.js` file to use `.babelrc` file
+
+```js
+module.exports = (on, config) => {
+  on('task', require('cypress-istanbul/task'))
+  on('file:preprocessor', require('cypress-istanbul/use-babelrc'))
+}
+```
+
 Now the code coverage from spec files will be combined with end-to-end coverage.
 
 ## Examples
 
-- [Demo battery app](https://github.com/bahmutov/demo-battery-api/tree/bundle) branch "bundle"
 - Read ["Code Coverage by Parcel Bundler"](https://glebbahmutov.com/blog/code-coverage-by-parcel/) blog post
+- Read ["Combined End-to-end and Unit Test Coverage"](https://glebbahmutov.com/blog/combined-end-to-end-and-unit-test-coverage/)
 
 ## License
 

cypress/integration/spec.js

@@ -2,6 +2,8 @@
 // https://on.cypress.io/intelligent-code-completion
 /// <reference types="Cypress" />
 
+import {add} from '../unit'
+
 context('Page test', () => {
   beforeEach(() => {
     cy.visit('/', {
@@ -17,3 +19,13 @@ context('Page test', () => {
       .should('have.been.calledWith', 'just names', ['joe', 'mary'])
   })
 })
+
+context('Unit tests', () => {
+  it('adds numbers', () => {
+    expect(add(2, 3)).to.equal(5)
+  })
+
+  it('concatenates strings', () => {
+    expect(add('foo', 'Bar')).to.equal('fooBar')
+  })
+})

cypress/plugins/index.js

@@ -1,3 +1,8 @@
 module.exports = (on, config) => {
   on('task', require('../../task'))
+
+  // also use .babelrc file when bundling spec files
+  // to get the code coverage from unit tests
+  // https://glebbahmutov.com/blog/combined-end-to-end-and-unit-test-coverage/
+  on('file:preprocessor', require('../../use-babelrc'))
 }

cypress/unit.js

@@ -0,0 +1 @@
+export const add = (a, b) => a + b