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

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

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import Test from './Test'
+
+describe('components', () => {
+  it('works', () => {
+    mount(<Test />)
+    cy.contains('Text')
+  })
+
+  it('works with plain div', () => {
+    mount(<div>Text</div>)
+    cy.contains('Text')
+  })
+})

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

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Test = () => <div>Text</div>
+
+export default Test

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

@@ -0,0 +1 @@
+export const getRandomNumber = () => Math.round(Math.random() * 1000)

examples/webpack5-file/cypress/integration/cy-spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/webpack5-file/cypress/plugins/index.js

@@ -0,0 +1,10 @@
+// load file preprocessor that comes with this plugin
+// https://github.com/bahmutov/cypress-react-unit-test#install
+module.exports = (on, config) => {
+  // from the root of the project (folder with cypress.json file)
+  config.env.webpackFilename = 'webpack.config.js'
+  require('cypress-react-unit-test/plugins/load-webpack')(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/webpack5-file/cypress/support/index.js

@@ -0,0 +1,3 @@
+require('cypress-react-unit-test/dist/hooks')
+// if we need code coverage, need to include its custom support hook
+require('@cypress/code-coverage/support')

examples/webpack5-file/more-components/src/Hello.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Hello = () => <div>Hello!</div>
+
+export default Hello

examples/webpack5-file/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "example-webpack-options",
+  "description": "Using default Webpack options to transpile simple tests",
+  "private": true,
+  "scripts": {
+    "test": "cypress-expect run --passing 7",
+    "cy:open": "cypress open",
+    "check-coverage": "check-coverage Test.js calc.js ParentComponent.js ChildComponent.js",
+    "only-covered": "only-covered Test.js calc.js ParentComponent.js ChildComponent.js more-components/src/Hello.js"
+  },
+  "devDependencies": {
+    "babel-loader": "8.1.0",
+    "check-code-coverage": "1.10.0",
+    "cypress": "5.3.0",
+    "cypress-expect": "2.1.0",
+    "cypress-react-unit-test": "file:../..",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "webpack": "5.2.0"
+  }
+}

examples/webpack5-file/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+    ],
+  },
+  // add alias to load "@components" from another folder
+  // so that tests in cypress/component can load components using
+  // import X from '@components/X'
+  // see https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/
+  resolve: {
+    extensions: ['.js'],
+    alias: {
+      '@components': path.resolve(__dirname, 'more-components', 'src'),
+    },
+  },
+}