Merge branch 'develop' into agg23/ESLintUpgrade

npm/react/examples/react-scripts/package.json

@@ -13,7 +13,9 @@
     "@cypress/react": "file:../../dist",
     "check-code-coverage": "1.9.2",
     "cypress-circleci-reporter": "0.2.0",
-    "react-scripts": "3.4.3"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-scripts": "4.0.2"
   },
   "browserslist": {
     "production": [

npm/react/examples/react-scripts/src/RemotePizza.cy-spec.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import ReactDom from 'react-dom'
 import RemotePizza from './RemotePizza'
 import { mount } from '@cypress/react'
 
@@ -10,7 +11,7 @@ describe('RemotePizza', () => {
       'pizza',
     )
 
-    mount(<RemotePizza />)
+    mount(<RemotePizza />, { ReactDom })
     cy.contains('button', /cook/i).click()
     cy.wait('@pizza') // make sure the network stub was used
 
@@ -35,7 +36,7 @@ describe('RemotePizza', () => {
       args: { ingredients },
     })
 
-    mount(<RemotePizza />)
+    mount(<RemotePizza />, { ReactDom })
     cy.contains('button', /cook/i).click()
 
     for (const ingredient of ingredients) {

npm/react/plugins/react-scripts/findReactScriptsWebpackConfig.js

@@ -83,6 +83,10 @@ const addCypressToWebpackEslintRulesInPlace = (webpackOptions) => {
 }
 
 module.exports = function findReactScriptsWebpackConfig (config) {
+  // this is required because
+  // 1) we use our own HMR and we don't need react-refresh transpiling overhead
+  // 2) it doesn't work with process.env=test @see https://github.com/cypress-io/cypress-realworld-app/pull/832
+  process.env.FAST_REFRESH = 'false'
   const webpackConfig = tryLoadWebpackConfig('react-scripts/config/webpack.config')
 
   if (!webpackConfig) {