Create not-working example with lazy + suspense (#410)

* Create not-working example with lazy + suspense

* Remove console.log

* Add Readme description

Author: dmtrKovalenko

README.md

@@ -182,6 +182,7 @@ Spec | Description
 [radioactive-state](cypress/component/advanced/radioactive-state) | Testing components that use [radioactive-state](https://github.com/MananTank/radioactive-state) library
 [react-bootstrap](cypress/component/advanced/react-bootstrap) | Confirms [react-bootstrap](https://react-bootstrap.github.io/) components are working
 [select React component](cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js) | Uses [cypress-react-selector](https://github.com/abhinaba-ghosh/cypress-react-selector) to find DOM elements using React component name and state values
+[lazy-loaded](cypress/component/advanced/lazy-loaded-suspense) | Uses multiple chunks and async components with `React.lazy` + `React.Suspense`.
 [i18n](cypress/component/advanced/i18n) | Uses[react-i18next](https://react.i18next.com/) for localizaiton.
 <!-- prettier-ignore-end -->
 

cypress/component/advanced/lazy-loaded-suspense/Dog.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+// @ts-ignore
+import SamoyedImage from './samoyed.jpg'
+
+interface DogProps {}
+
+export const Dog: React.FC<DogProps> = ({}) => {
+  return (
+    <div>
+      <h1> Your dog is Samoyed: </h1>
+      <img src={SamoyedImage} />
+    </div>
+  )
+}
+
+export default Dog

cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const LazyDog = React.lazy(() => import(/* webpackChunkName: "Dog" */ './Dog'))
+interface LazyComponentProps {}
+
+export const LazyComponent: React.FC<LazyComponentProps> = ({}) => {
+  return (
+    <div>
+      Loading a dog:
+      <React.Suspense fallback={'loading...'}>
+        <LazyDog />
+      </React.Suspense>
+    </div>
+  )
+}

cypress/component/advanced/lazy-loaded-suspense/lazy-loaded-suspense.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { LazyComponent } from './LazyComponent'
+import { mount } from 'cypress-react-unit-test'
+
+describe.skip('React.lazy component with <Suspense />', () => {
+  it('renders and retries till component is loaded', () => {
+    mount(<LazyComponent />)
+    cy.contains('loading...')
+    cy.contains('Your dog is')
+  })
+})

cypress/component/advanced/lazy-loaded-suspense/samoyed.jpg

@@ -2,7 +2,7 @@ const path = require('path')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const babelConfig = require('../../babel.config.js')
 
-// should we just reuse root webpack config?
+/** @type import("webpack").Configuration */
 const webpackOptions = {
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx'],
@@ -12,6 +12,10 @@ const webpackOptions = {
   },
   mode: 'development',
   devtool: false,
+  output: {
+    publicPath: '/',
+    chunkFilename: '[name].bundle.js',
+  },
   module: {
     rules: [
       {
@@ -29,6 +33,15 @@ const webpackOptions = {
         test: /\.svg$/,
         loader: 'svg-url-loader',
       },
+      {
+        // some of our examples import SVG
+        test: /\.svg$/,
+        loader: 'svg-url-loader',
+      },
+      {
+        test: /\.(png|jpg)$/,
+        use: ['file-loader'],
+      },
     ],
   },
 }

cypress/plugins/index.js

@@ -1,8 +1,12 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["./**/*.ts"],
+  "include": ["./**/*.ts*"],
   "compilerOptions": {
-    "baseUrl": "../node_modules",
-    "types": ["cypress"]
+    "baseUrl": ".",
+    "jsx": "react",
+    "types": ["cypress"],
+    "paths": {
+      "cypress-react-unit-test": ["../lib"]
+    }
   }
 }