Add example using react-app-rewired (#512)

Author: bahmutov

README.md

@@ -240,6 +240,7 @@ Folder Name | Description
 [visual-testing-with-percy](examples/visual-testing-with-percy) | [Visual testing](#visual-testing) for components using 3rd party service [Percy.io](https://percy.io/)
 [webpack-file](examples/webpack-file) | Load existing `webpack.config.js` file
 [webpack-options](examples/webpack-options) | Using the default Webpack options from `@cypress/webpack-preprocessor` to transpile JSX specs
+[rewired](examples/rewired) | Component tests for apps that use [react-app-rewired](https://github.com/timarney/react-app-rewired)
 <!-- prettier-ignore-end -->
 
 ### External examples

circle.yml

@@ -140,6 +140,27 @@ workflows:
                   npm run only-covered
                 working_directory: examples/react-scripts
 
+      - cypress/run:
+          name: Example React App Rewired
+          requires:
+            - Component Tests
+          executor: cypress/base-12
+          install-command: |
+            ls -la ../..
+            echo ***Installing cypress-react-unit-test from root TGZ archive***
+            npm install -D ../../cypress-react-unit-test-0.0.0-development.tgz
+            echo ***Installing other dependencies***
+            npm install
+            echo ***rename root node_modules to avoid accidental dependencies***
+            mv ../../node_modules ../../no_modules
+            echo ***React version***
+            npm ls react react-dom
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/rewired
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Example Next.js
           requires:
@@ -506,6 +527,7 @@ workflows:
             - Example Component Folder
             - Example Cucumber
             - Example React Scripts
+            - Example React App Rewired
             - Example Sass
             - Example Snapshots
             - Example Tailwind

examples/rewired/.env

@@ -0,0 +1,3 @@
+# do not complain about babel-loader in this folder
+# and in the root folder
+SKIP_PREFLIGHT_CHECK=true

examples/rewired/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/rewired/README.md

@@ -0,0 +1,37 @@
+# example: react-app-rewired
+
+Component tests for apps that use [react-app-rewired](https://github.com/timarney/react-app-rewired)
+
+Main idea: find and load Webpack options using [find-webpack](https://github.com/bahmutov/find-webpack) module, then pass it through the [config-overrides.js](config-overrides.js) file. Then give it to the Cypress Webpack preprocessor. See [cypress/plugins/index.js](cypress/plugins/index.js) for details.
+
+TODO: go through the rest of the spec files in [src](src) folder to make sure they work.
+TODO: validate the code coverage
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Debugging
+
+You can see the Webpack config by running Cypress with `DEBUG=overrides` environment variable.

examples/rewired/config-overrides.js

@@ -0,0 +1,17 @@
+// to see these debug messages, run the program with
+// DEBUG=overrides
+const debug = require('debug')('overrides')
+
+module.exports = function override(config, env) {
+  debug('in config overrides, env "%s"', env)
+  debug('config %o', config)
+
+  // throw an error to stop the app
+  // useful for debugging to avoid the dev server
+  // from hiding the console output
+  // throw new Error('stop here')
+
+  //do stuff with the webpack config...
+
+  return config
+}

examples/rewired/cypress.json

@@ -0,0 +1,7 @@
+{
+  "testFiles": "*.spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 800,
+  "experimentalComponentTesting": true,
+  "componentFolder": "src"
+}

examples/rewired/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

examples/rewired/cypress/plugins/index.js

@@ -0,0 +1,31 @@
+// load file preprocessor that comes with this plugin
+// https://github.com/bahmutov/cypress-react-unit-test#install
+const debug = require('debug')('overrides')
+const fw = require('find-webpack')
+
+const env = (process.env.NODE_ENV = process.env.NODE_ENV || 'development')
+
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+  // require('@cypress/code-coverage/task')(on, config)
+
+  const foundWebpackOptions = fw.getWebpackOptions()
+  const configOverrides = require('react-app-rewired/config-overrides')
+  const webpackOptions = configOverrides.webpack(foundWebpackOptions, env)
+
+  debug('webpackOptions %o', webpackOptions)
+  fw.cleanForCypress(
+    {
+      reactScripts: true,
+      looseModules: true,
+    },
+    webpackOptions,
+  )
+
+  on('file:preprocessor', webpackPreprocessor({ webpackOptions }))
+
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/rewired/cypress/support/index.js

@@ -0,0 +1,2 @@
+require('cypress-react-unit-test/support')
+require('@cypress/code-coverage/support')