add example with Webpack5 (#511)

Author: bahmutov

circle.yml

@@ -249,6 +249,32 @@ workflows:
                   npm run only-covered
                 working_directory: examples/webpack-file
 
+      - cypress/run:
+          name: Example Webpack5 file
+          requires:
+            - Component Tests
+          executor: cypress/base-12
+          install-command: |
+            ls -la ../..
+            echo ***Installing cypress-react-unit-test from root TGZ archive***
+            npm install -D ../../cypress-react-unit-test-0.0.0-development.tgz
+            echo ***Installing other dependencies***
+            npm install
+            echo ***rename root node_modules to avoid accidental dependencies***
+            mv ../../node_modules ../../no_modules
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/webpack5-file
+          command: npm test
+          store_artifacts: true
+          post-steps:
+            - run:
+                name: Check coverage 📈
+                command: |
+                  npm run check-coverage
+                  npm run only-covered
+                working_directory: examples/webpack5-file
+
       - cypress/run:
           name: Example Rollup
           requires:
@@ -484,6 +510,7 @@ workflows:
             - Example Snapshots
             - Example Tailwind
             - Example Webpack file
+            - Example Webpack5 file
             - Example Webpack options
             - Example Rollup
             - Visual Sudoku

examples/webpack5-file/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

examples/webpack5-file/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/webpack5-file/README.md

@@ -0,0 +1,32 @@
+# example: webpack5-file
+
+> Component tests for projects using existing [webpack.config.js](webpack.config.js) file and [Webpack 5](https://webpack.js.org/blog/2020-10-10-webpack-5-release/)
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```
+
+## Notes
+
+See tests in the [cypress/component](cypress/component) folder. We also allow tests to load components using a [webpack alias](webpack.config.js) from `more-components/src` folder using `import Hello from '@components/Hello'`.

examples/webpack5-file/cypress.json

@@ -0,0 +1,7 @@
+{
+  "fixturesFolder": false,
+  "testFiles": "**/*cy-spec.js",
+  "viewportWidth": 500,
+  "viewportHeight": 500,
+  "experimentalComponentTesting": true
+}

examples/webpack5-file/cypress/component/ChildComponent.cy-spec.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import ChildComponent from './ChildComponent'
+import * as calc from './calc'
+
+describe('ChildComponent unstubbed', () => {
+  it('works', () => {
+    cy.spy(calc, 'getRandomNumber').as('getRandomNumber')
+    mount(<ChildComponent />)
+    // make sure the component shows the random value
+    // returned by the calc.getRandomNumber function
+    cy.get('@getRandomNumber')
+      .should('have.been.called')
+      .its('returnValues.0')
+      .then(n => {
+        cy.contains('.random', n)
+      })
+  })
+})

examples/webpack5-file/cypress/component/ChildComponent.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { getRandomNumber } from './calc'
+
+const ChildComponent = () => (
+  <div>
+    Child component <p className="random">Random number {getRandomNumber()}</p>
+  </div>
+)
+
+export default ChildComponent

examples/webpack5-file/cypress/component/Hello.cy-spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+// use path alias defined in webpack config
+import Hello from '@components/Hello'
+
+describe('Hello using path alias', () => {
+  it('works', () => {
+    mount(<Hello />)
+    cy.contains('Hello!').should('be.visible')
+  })
+})

examples/webpack5-file/cypress/component/Mock.cy-spec.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import ParentComponent from './ParentComponent'
+import * as calc from './calc'
+import * as ChildComponent from './ChildComponent'
+
+describe('Mocking', () => {
+  it('named getRandomNumber imported in the child component', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+    mount(<ParentComponent />)
+    cy.contains('.random', '777')
+  })
+
+  it('entire child component exported as default', () => {
+    cy.stub(ChildComponent, 'default')
+      .as('child')
+      .returns(<div className="mock-child">Mock child component</div>)
+    mount(<ParentComponent />)
+    cy.contains('.mock-child', 'Mock child component')
+  })
+})

examples/webpack5-file/cypress/component/ParentComponent.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ChildComponent from './ChildComponent'
+
+const ParentComponent = () => (
+  <div>
+    Parent component, child component below
+    <br />
+    <ChildComponent />
+  </div>
+)
+
+export default ParentComponent