point plugins at index file

Author: bahmutov

docs/recipes.md

@@ -13,48 +13,38 @@ But usually you want to point Cypress at your application's current Webpack conf
 
 ## React Scripts
 
-If you are using Create-React-App v3 or `react-scripts`, and want to reuse the built in webpack before ejecting, this module ships with Cypress preprocessor in [plugins](plugins) folder. From the `cypress.json` point at the shipped plugin in the `node_modules`.
+If you are using Create-React-App v3 or `react-scripts`, and want to reuse the built in webpack before ejecting, this module ships with Cypress preprocessor in [plugins](plugins) folder.
 
-```json
-{
-  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/cra-v3",
-  "supportFile": "node_modules/cypress-react-unit-test/support",
-  "experimentalComponentTesting": true
+```js
+// cypress/plugins/index.js
+module.exports = (on, config) => {
+  require('cypress-react-unit-test/plugins/cra-v3')(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
 }
 ```
 
-See example repo [bahmutov/try-cra-with-unit-test](https://github.com/bahmutov/try-cra-with-unit-test), typical full config with specs and source files in `src` folder (before [ejecting the app](https://github.com/bahmutov/cypress-react-unit-test/issues/134)):
+See example repo [bahmutov/try-cra-with-unit-test](https://github.com/bahmutov/try-cra-with-unit-test)
 
-```json
-{
-  "fixturesFolder": false,
-  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/cra-v3",
-  "supportFile": "node_modules/cypress-react-unit-test/support",
-  "testFiles": "**/*.spec.js",
-  "experimentalComponentTesting": true,
-  "componentFolder": "src"
-}
-```
+## Your webpack config
 
-If you already have a plugins file, you can use a file preprocessor that points at CRA's webpack
+If you have your own webpack config, you can use included plugins file to load it.
 
 ```js
-// your project's Cypress plugin file
-const craFilePreprocessor = require('cypress-react-unit-test/plugins/cra-v3/file-preprocessor')
-module.exports = on => {
-  on('file:preprocessor', craFilePreprocessor())
+// cypress/plugins/index.js
+module.exports = (on, config) => {
+  require('cypress-react-unit-test/plugins/load-webpack')(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
 }
 ```
 
-**Bonus:** re-using the config means if you create your application using `create-react-app --typescript`, then TypeScript transpile just works out of the box. See [bahmutov/try-cra-app-typescript](https://github.com/bahmutov/try-cra-app-typescript).
-
-## Your webpack config
-
-If you have your own webpack config, you can use included plugins file to load it. Here is the configuration using the included plugins file and passing the name of the config file via `env` variable in the `cypress.json` file
+Pass the name of the config file via `env` variable in the `cypress.json` file
 
 ```json
 {
-  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/load-webpack",
   "experimentalComponentTesting": true,
   "env": {
     "webpackFilename": "demo/config/webpack.dev.js"
@@ -77,14 +67,6 @@ module.exports = (on, config) => {
 }
 ```
 
-In `cypress.json` file set:
-
-```json
-{
-  "experimentalComponentTesting": true
-}
-```
-
 **Bonus:** in order to enable code instrumentation, add the `babel-plugin-istanbul` (included in this plugin) to your `.babelrc` setup. You can place it under `test` environment to avoid instrumenting production code. Example `.babelrc` config file that you can execute with `BABEL_ENV=test npx cypress open`
 
 ```json