feat: correctly clean up webpack for react-scripts for lazy dynamic imports

Author: bahmutov

babel.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-react'],
   plugins: [
+    // allow lazy loaded components with dynamic "import(...)"
+    // https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/
+    '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-class-properties',
     // https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
     // loose ES6 modules allow us to dynamically mock imports during tests

cypress/component/component tests/advanced/lazy-loaded/App.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const OtherComponent = React.lazy(() => import('./OtherComponent'))
+
+export default App = () => (
+  <div className="app">
+    <OtherComponent />
+  </div>
+)

cypress/component/component tests/advanced/lazy-loaded/OtherComponent.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <div className="other">The Other Component</div>

cypress/component/component tests/advanced/lazy-loaded/app-spec.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+// import App from './App'
+
+// https://github.com/bahmutov/cypress-react-unit-test/issues/136
+describe.skip('App loads', () => {
+  it('renders lazy component', () => {
+    mount(<App />)
+    cy.contains('The Other')
+  })
+})

cypress/component/component tests/advanced/lazy-loaded/lazy-add.js

@@ -0,0 +1 @@
+export default (a, b) => a + b

cypress/component/component tests/advanced/lazy-loaded/lazy-load-spec.js

@@ -0,0 +1,6 @@
+// https://github.com/bahmutov/cypress-react-unit-test/issues/136
+describe.skip('dynamic import', () => {
+  it('loads', () => {
+    cy.wrap(import('./lazy-add'))
+  })
+})

cypress/component/component tests/advanced/lazy-loaded/other-spec.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import OtherComponent from './OtherComponent'
+
+describe('Other component by itself', () => {
+  it('renders', () => {
+    mount(<OtherComponent />)
+    cy.contains('The Other')
+  })
+})

cypress/plugins/index.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const webpack = require('@cypress/webpack-preprocessor')
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const babelConfig = require('../../babel.config.js')
 // const { initPlugin } = require('cypress-plugin-snapshots/plugin')
 
@@ -39,7 +39,7 @@ const options = {
 }
 
 module.exports = (on, config) => {
-  on('file:preprocessor', webpack(options))
+  on('file:preprocessor', webpackPreprocessor(options))
 
   // initPlugin(on, config)
   return config

package-lock.json

@@ -46,9 +46,11 @@
   "devDependencies": {
     "@babel/core": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.7.5",
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
+    "@emotion/core": "10.0.22",
     "@material-ui/core": "4.9.5",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.39",
@@ -69,8 +71,8 @@
     "prettier": "1.19.1",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-google-maps": "9.4.5",
     "react-router": "6.0.0-alpha.1",
     "react-router-dom": "6.0.0-alpha.1",
@@ -81,8 +83,7 @@
     "svg-url-loader": "3.0.3",
     "typescript": "3.7.3",
     "webpack": "4.33.0",
-    "webpack-cli": "3.3.9",
-    "@emotion/core": "10.0.22"
+    "webpack-cli": "3.3.9"
   },
   "standard": {
     "globals": [