feat: Use custom Babel module to enable named imports mocking (#265)

Author: bahmutov

README.md

@@ -174,6 +174,7 @@ Folder Name | Description
 [visual-testing-with-percy](examples/visual-testing-with-percy) | [Visual testing](#visual-testing) for components using 3rd party service [Percy.io](https://percy.io/)
 [visual-testing-with-happo](examples/visual-testing-with-happo) | [Visual testing](#visual-testing) for components using 3rd party service [Happo](https://happo.io/)
 [using-babel](examples/using-babel) | Bundling specs and loaded source files using project's existing `.babelrc` file
+[webpack-file](examples/webpack-file) | Load existing `webpack.config.js` file
 [webpack-options](examples/webpack-options) | Using the default Webpack options from `@cypress/webpack-preprocessor` to transpile JSX specs
 <!-- prettier-ignore-end -->
 

circle.yml

@@ -6,6 +6,8 @@ executors:
   base-12-16-2:
     docker:
       - image: 'cypress/base:12.16.2'
+    environment:
+      DEBUG: find-webpack,cypress-react-unit-test
 
 workflows:
   build:
@@ -117,6 +119,26 @@ workflows:
                   npm run only-covered
                 working_directory: examples/tailwind
 
+      - cypress/run:
+          name: Example Webpack file
+          executor: base-12-16-2
+          requires:
+            - Install
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          install-command: npm install
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/webpack-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/webpack-file
+
       - cypress/run:
           name: Example Webpack options
           executor: cypress/base-12
@@ -271,6 +293,7 @@ workflows:
             - Example Sass
             - Example Snapshots
             - Example Tailwind
+            - Example Webpack file
             - Example Webpack options
             - Visual Sudoku
             - Visual with Percy

examples/react-scripts-folder/cypress.json

@@ -2,7 +2,7 @@
   "fixturesFolder": false,
   "testFiles": "**/*cy-spec.js",
   "viewportWidth": 500,
-  "viewportHeight": 500,
+  "viewportHeight": 800,
   "experimentalComponentTesting": true,
   "componentFolder": "cypress/component"
 }

examples/react-scripts-folder/cypress/component/App.cy-spec.js

@@ -3,6 +3,8 @@
 import React from 'react'
 import App from '../../src/App'
 import { mount } from 'cypress-react-unit-test'
+import * as calc from '../../src/calc'
+import * as child from '../../src/Child'
 
 describe('App', () => {
   it('renders learn react link', () => {
@@ -15,4 +17,26 @@ describe('App', () => {
     mount(<div>JSX</div>)
     cy.contains('JSX')
   })
+
+  it('controls the random number by stubbing named import', () => {
+    // we are stubbing "getRandomNumber" exported by "calc.js"
+    // and imported into "App.js" and called.
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+    mount(<App />)
+    cy.contains('.random', '777')
+    cy.get('@lucky').should('be.calledOnce')
+  })
+
+  it('stubs an imported child component', () => {
+    cy.stub(child, 'Child')
+      .as('child')
+      .returns(<div className="mock-child">Mock child component</div>)
+    mount(<App />)
+    // App component rendered our mock child component!
+    cy.contains('Mock child component')
+    cy.get('@child').should('have.been.calledTwice')
+    cy.get('.mock-child').should('have.length', 2)
+  })
 })

examples/react-scripts-folder/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
     "cy:open": "../../node_modules/.bin/cypress open",
-    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js",
-    "only-covered": "../../node_modules/.bin/only-covered src/App.js"
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js src/calc.js src/Child.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js src/calc.js src/Child.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/react-scripts-folder/src/App.js

@@ -3,6 +3,8 @@ import React from 'react'
 import './App.css'
 import logo from './logo.svg' // => "/__root/src/logo.svg"
 import cypressLogo from './cypress-logo-dark.png' // => "/__root/src/cypress-logo-dark.png"
+import { getRandomNumber } from './calc'
+import { Child } from './Child'
 
 // large image will be transformed into
 // a different url static/media/vans.25e5784d.jpg
@@ -22,6 +24,7 @@ function App() {
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <p className="random">This is a random number {getRandomNumber()}</p>
         <a
           className="App-link"
           href="https://reactjs.org"
@@ -31,6 +34,8 @@ function App() {
           Learn React
         </a>
       </header>
+      <Child />
+      <Child />
     </div>
   )
 }

examples/react-scripts-folder/src/Child.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const Child = () => <div>Real child component</div>

examples/react-scripts-folder/src/calc.js

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

examples/react-scripts/cypress.json

@@ -2,7 +2,7 @@
   "fixturesFolder": false,
   "testFiles": "**/*cy-spec.js",
   "viewportWidth": 500,
-  "viewportHeight": 500,
+  "viewportHeight": 800,
   "experimentalComponentTesting": true,
   "componentFolder": "src"
 }

examples/react-scripts/package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "test": "../../node_modules/.bin/cypress run",
     "cy:open": "../../node_modules/.bin/cypress open",
-    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js",
-    "only-covered": "../../node_modules/.bin/only-covered src/App.js"
+    "check-coverage": "../../node_modules/.bin/check-coverage src/App.js src/calc.js src/Child.js",
+    "only-covered": "../../node_modules/.bin/only-covered src/App.js src/calc.js src/Child.js"
   },
   "devDependencies": {
     "cypress-react-unit-test": "file:../.."

examples/react-scripts/src/App.cy-spec.js

@@ -3,10 +3,33 @@
 import React from 'react'
 import App from './App'
 import { mount } from 'cypress-react-unit-test'
+import * as calc from './calc'
+import * as Child from './Child'
 
 describe('App', () => {
   it('renders learn react link', () => {
     mount(<App />)
     cy.contains(/Learn React/)
   })
+
+  it('controls the random number by stubbing named import', () => {
+    // we are stubbing "getRandomNumber" exported by "calc.js"
+    // and imported into "App.js" and called.
+    cy.stub(calc, 'getRandomNumber').returns(777)
+    mount(<App />)
+    cy.contains('.random', '777')
+
+    // getRandomNumber was also used by the Child component
+    // let's check that it was mocked too
+    cy.contains('.child', 'Real child component, random 777')
+  })
+
+  it('can mock the child component', () => {
+    // Child component we want to stub is the default export
+    cy.stub(Child, 'default')
+      .as('child')
+      .returns(<div className="mock-child">Mock Child component</div>)
+    mount(<App />)
+    cy.contains('.mock-child', 'Mock Child')
+  })
 })

examples/react-scripts/src/App.js

@@ -3,6 +3,8 @@ import React from 'react'
 import './App.css'
 import logo from './logo.svg' // => "/__root/src/logo.svg"
 import cypressLogo from './cypress-logo-dark.png' // => "/__root/src/cypress-logo-dark.png"
+import { getRandomNumber } from './calc'
+import Child from './Child'
 
 // large image will be transformed into
 // a different url static/media/vans.25e5784d.jpg
@@ -22,6 +24,8 @@ function App() {
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <p className="random">This is a random number {getRandomNumber()}</p>
+        <Child />
         <a
           className="App-link"
           href="https://reactjs.org"

examples/react-scripts/src/Child.js

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

examples/react-scripts/src/calc.js

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

examples/using-babel/.babelrc

@@ -8,9 +8,20 @@
     "@emotion/babel-preset-css-prop"
   ],
   "env": {
+    // TODO switch this to "development" name
     "test": {
       "plugins": [
-        "babel-plugin-istanbul"
+        // during Cypress tests we want to instrument source code
+        // to get code coverage from tests
+        "babel-plugin-istanbul",
+        // we also want to export ES6 modules as objects
+        // to allow mocking named imports
+        [
+          "@babel/plugin-transform-modules-commonjs",
+          {
+            "loose": true
+          }
+        ]
       ]
     }
   }

examples/using-babel/src/Mock.spec.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import Post from './Post'
+import * as calc from './calc'
+
+describe('Mocking', () => {
+  // https://github.com/bahmutov/cypress-react-unit-test/issues/266
+  it.skip('mocks import used by the Post', () => {
+    cy.stub(calc, 'getRandomNumber')
+      .as('lucky')
+      .returns(777)
+    mount(<Post title="post title" children="post text" />)
+    cy.contains('.random', '777')
+  })
+})

examples/using-babel/src/Post.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Skeleton from 'react-loading-skeleton'
+import { getRandomNumber } from './calc'
 
 export default class Post extends Component {
   static propTypes = {
@@ -30,6 +31,7 @@ export default class Post extends Component {
       <div style={this.getStyle()}>
         <h1>{this.props.title || <Skeleton />}</h1>
         <p>{this.props.children || <Skeleton count={5} />}</p>
+        <p className="random">random id {getRandomNumber()}</p>
       </div>
     )
   }

examples/using-babel/src/calc.js

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

examples/webpack-file/.babelrc

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

examples/webpack-file/.npmrc

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

examples/webpack-file/README.md

@@ -0,0 +1,13 @@
+# example: webpack-file
+
+> Component tests for projects using existing [webpack.config.js](webpack.config.js) file
+
+Note: run `npm install` in this folder to symlink `cypress-react-unit-test` dependency.
+
+```shell
+npm run cy:open
+# or run headless tests
+npm test
+```
+
+See tests in the [cypress/component](cypress/component) folder.

examples/webpack-file/cypress.json

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

examples/webpack-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/webpack-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/webpack-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/webpack-file/cypress/component/Test.cy-spec.js

@@ -0,0 +1,15 @@
+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/webpack-file/cypress/component/Test.js

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+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
+}