Check code coverage for all examples (#255)

Author: bahmutov

circle.yml

@@ -54,6 +54,13 @@ workflows:
           working_directory: examples/react-scripts
           command: npm test
           store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/react-scripts
 
       - cypress/run:
           # react-scripts example with component tests not in "src" folder
@@ -69,6 +76,13 @@ workflows:
           working_directory: examples/react-scripts-folder
           command: npm test
           store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/react-scripts-folder
 
       - cypress/run:
           name: Example Tailwind
@@ -79,8 +93,17 @@ workflows:
           verify-command: echo 'Already verified'
           no-workspace: true
           working_directory: examples/tailwind
-          command: npm test
+          command: |
+            DEBUG=cypress-react-unit-test,find-webpack npm test
           store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  ls -la
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/tailwind
 
       - cypress/run:
           name: Example Webpack options
@@ -94,6 +117,13 @@ workflows:
           working_directory: examples/webpack-options
           command: npm test
           store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/webpack-options
 
       - cypress/run:
           name: Example Sass

examples/react-scripts-folder/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)
   // IMPORTANT to return the config object

examples/react-scripts-folder/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
-    "cy:open": "../../node_modules/.bin/cypress open"
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/react-scripts/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)
   // IMPORTANT to return the config object

examples/react-scripts/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
-    "cy:open": "../../node_modules/.bin/cypress open"
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/tailwind/cypress.json

@@ -6,6 +6,6 @@
   "experimentalComponentTesting": true,
   "componentFolder": "src",
   "env": {
-    "coverage": false
+    "coverage": true
   }
 }

examples/tailwind/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)
   // IMPORTANT to return the config object

examples/tailwind/package.json

@@ -7,7 +7,9 @@
     "cy:open": "../../node_modules/.bin/cypress open",
     "build:css": "../../node_modules/.bin/tailwindcss build src/styles/tailwind.css -o src/styles/main.generated.css",
     "pretest": "npm run build:css",
-    "precy:open": "npm run build:css"
+    "precy:open": "npm run build:css",
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/visual-sudoku/README.md

@@ -4,6 +4,8 @@ This React Sudoku app was cloned from [raravi/sudoku](https://github.com/raravi/
 
 Visual testing uses open source [palmerhq/cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot) plugin.
 
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
 Example failing test [src/App.cy-spec.js](src/App.cy-spec.js)
 
 ![failing test](images/test.png)

examples/visual-sudoku/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
 module.exports = (on, config) => {

examples/visual-testing-with-applitools/README.md

@@ -6,6 +6,8 @@ Shows how to use Applitools to visually check React charts made with [Victory](h
 
 See [src/Chart.spec.js](src/Chart.spec.js)
 
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
 The `cy.eyes*` commands are ignored during local interactive run. On CI, the `cy.eyes*` send the snapshots to Applitools servers to be analyzed and compared against the baseline images.
 
 ![Test result](images/result.png)

examples/visual-testing-with-applitools/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 module.exports = (on, config) => {
   preprocessor(on, config)
   // IMPORTANT to return the config object

examples/visual-testing-with-happo/README.md

@@ -6,6 +6,8 @@
 
 > Visual component testing using [Happo.io](https://docs.happo.io/docs/cypress)
 
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
 Example PR with code a change where we forgot to update the styles with additional classes: [#210](https://github.com/bahmutov/cypress-react-unit-test/pull/210)
 
 Notice that CircleCI passes the test, because functionally it worked, but the Happo CI check shows a failure:

examples/visual-testing-with-happo/cypress/plugins/index.js

@@ -1,6 +1,6 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 const happoTask = require('happo-cypress/task')
 
 module.exports = (on, config) => {

examples/visual-testing-with-percy/README.md

@@ -2,6 +2,8 @@
 
 Uses [@percy/cypress](https://github.com/percy/percy-cypress) to run visual tests for a demo of Material UI date pickers from https://material-ui.com/components/pickers/. Every pull request shows the visual diff (if any) and allows us to confirm that styles and layouts have not changed.
 
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
 The project was set up using Percy documentation (see support and plugins files). The example spec [src/DatePicker.cy-spec.js](src/DatePicker.cy-spec.js) runs `cy.percySnapshot` after confirming the DOM has updated.
 
 ```js

examples/visual-testing-with-percy/cypress/plugins/index.js

@@ -1,7 +1,7 @@
 // load file preprocessor that comes with this plugin
 // https://github.com/bahmutov/cypress-react-unit-test#install
 const percyHealthCheck = require('@percy/cypress/task')
-const preprocessor = require('../../../../plugins/react-scripts')
+const preprocessor = require('cypress-react-unit-test/plugins/react-scripts')
 module.exports = (on, config) => {
   on('task', percyHealthCheck)
   preprocessor(on, config)

examples/webpack-options/cypress/component/Test.cy-spec.js

@@ -1,8 +1,14 @@
 import React from 'react'
 import { mount } from 'cypress-react-unit-test'
+import Test from './Test'
 
 describe('components', () => {
   it('works', () => {
+    mount(<Test />)
+    cy.contains('Text')
+  })
+
+  it('works with plain div', () => {
     mount(<div>Text</div>)
     cy.contains('Text')
   })

examples/webpack-options/cypress/component/Test.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Test = () => <div>Text</div>
+
+export default Test

examples/webpack-options/cypress/plugins/index.js

@@ -6,9 +6,22 @@ const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 module.exports = (on, config) => {
   // @ts-ignore
   const opts = webpackPreprocessor.defaultOptions
+  const babelLoader = opts.webpackOptions.module.rules[0].use[0]
+
   // add React preset to be able to transpile JSX
-  opts.webpackOptions.module.rules[0].use[0].options.presets.push(
-    require.resolve('@babel/preset-react'),
-  )
+  babelLoader.options.presets.push(require.resolve('@babel/preset-react'))
+
+  // We can also push Babel istanbul plugin to instrument the code on the fly
+  // and get code coverage reports from component tests (optional)
+  if (!babelLoader.options.plugins) {
+    babelLoader.options.plugins = []
+  }
+  babelLoader.options.plugins.push(require.resolve('babel-plugin-istanbul'))
+  // add code coverage plugin
+  require('@cypress/code-coverage/task')(on, config)
+
   on('file:preprocessor', webpackPreprocessor(opts))
+
+  // if adding code coverage, important to return updated config
+  return config
 }

examples/webpack-options/cypress/support/index.js

@@ -1 +1,3 @@
 require('cypress-react-unit-test/dist/hooks')
+// if we need code coverage, need to include its custom support hook
+require('@cypress/code-coverage/support')

examples/webpack-options/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
-    "cy:open": "../../node_modules/.bin/cypress open"
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "check-coverage": "../../node_modules/.bin/check-coverage component/Test.js",
+    "only-covered": "../../node_modules/.bin/only-covered component/Test.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."