feat: add react-scripts plugins as alias to cra-v3

README.md

@@ -50,7 +50,19 @@ npm install --save-dev cypress cypress-react-unit-test
 require('cypress-react-unit-test/support')
 ```
 
-2. Tell Cypress how your React application is transpiled or bundled (using Webpack), so Cypress can load your components. See [Recipes](./docs/recipes.md)
+2. Tell Cypress how your React application is transpiled or bundled (using Webpack), so Cypress can load your components. For example, if you use `react-scripts` do:
+
+```js
+// cypress/plugins/index.js
+module.exports = (on, config) => {
+  require('cypress-react-unit-test/plugins/react-scripts')(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}
+```
+
+See [Recipes](./docs/recipes.md) for more examples.
 
 3. ⚠️ Turn the experimental component support on in your `cypress.json`. You can also specify where component spec files are located. For example, to have them located in `src` folder use:
 

docs/recipes.md

@@ -18,7 +18,7 @@ If you are using Create-React-App v3 or `react-scripts`, and want to reuse the b
 ```js
 // cypress/plugins/index.js
 module.exports = (on, config) => {
-  require('cypress-react-unit-test/plugins/cra-v3')(on, config)
+  require('cypress-react-unit-test/plugins/react-scripts')(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config
@@ -27,6 +27,8 @@ module.exports = (on, config) => {
 
 See example repo [bahmutov/try-cra-with-unit-test](https://github.com/bahmutov/try-cra-with-unit-test)
 
+**Tip:** `plugins/react-scripts` is just loading `plugins/cra-v3`.
+
 ## Your webpack config
 
 If you have your own webpack config, you can use included plugins file to load it.

plugins/react-scripts/index.js

@@ -0,0 +1,9 @@
+const filePreprocessor = require('../cra-v3/file-preprocessor')
+
+module.exports = (on, config) => {
+  require('@cypress/code-coverage/task')(on, config)
+  on('file:preprocessor', filePreprocessor(config))
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}