feat: insert istanbul babel plugin in more situations (#253)

to get code coverage

Author: bahmutov

README.md

@@ -299,6 +299,14 @@ Keep your eye on issue [#156](https://github.com/bahmutov/cypress-react-unit-tes
 
 </details>
 
+<details id="missing-code-coverage">
+
+If you are using your custom Webpack, this plugin might be missing code coverage information because the code was not instrumented. We try to insert the `babel-plugin-istanbul` plugin automatically, but your bundling might not use Babel, or configure it differently, preventing plugin insertion. Please let us know by opening an issue with full reproducible details.
+
+See related issue [#141](https://github.com/bahmutov/cypress-react-unit-test/issues/141). You can also debug the plugin's behavior by running it with `DEBUG` environment variable, see [#debugging](#debugging) section.
+
+</details>
+
 ## Development
 
 See [docs/development.md](./docs/development.md)
@@ -311,6 +319,12 @@ You can see verbose logs from this plugin by running with environment variable
 DEBUG=cypress-react-unit-test
 ```
 
+Because finding and modifying Webpack settings while running this plugin is done by [find-webpack](https://github.com/bahmutov/find-webpack) module, you might want to enable its debug messages too.
+
+```
+DEBUG=cypress-react-unit-test,find-webpack
+```
+
 ## Migration guide
 
 ### From v3 to v4

circle.yml

@@ -109,6 +109,13 @@ workflows:
           working_directory: examples/sass-and-ts
           command: npm test
           store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/sass-and-ts
 
       - cypress/run:
           name: Visual Sudoku

examples/sass-and-ts/cypress.json

@@ -7,6 +7,6 @@
   "componentFolder": "src",
   "nodeVersion": "system",
   "env": {
-    "coverage": false
+    "coverage": true
   }
 }

examples/sass-and-ts/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.tsx",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.tsx"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/sass-and-ts/webpack.config.js

@@ -13,7 +13,13 @@ module.exports = {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env', '@babel/preset-react'],
-          plugins: ['@babel/plugin-proposal-class-properties'],
+          plugins: [
+            '@babel/plugin-proposal-class-properties',
+            // we want to instrument unit tests on the fly so we usually insert this plugin
+            // 'babel-plugin-istanbul',
+            // but cypress-react-unit-test inserts this plugin automatically
+            // if the code coverage is enabled, so you don't have to worry
+          ],
         },
       },
       {