add mocking readme

Author: bahmutov

cypress/component/advanced/mocking-component/README.md

@@ -1 +1,47 @@
-example from https://reactjs.org/docs/testing-recipes.html#mocking-modules
+# Mocking ES6 imports
+
+The original example comes from https://reactjs.org/docs/testing-recipes.html#mocking-modules
+
+The [contact.js](contact.js) component imports [map.js](map.js) component. But the real Map is expensive to render - it uses Google Maps, etc. Thus during tests we would like to replace the real Map with `DummyMap` component that only renders the props.
+
+See [spec.js](spec.js) test file. The recommended approach is to mock the ES6 import.
+
+```js
+// contact.js
+import Map from './map'
+export default function Contact(props) {
+  // renders <Map ...>
+}
+
+// spec.js
+import Contact from './contact'
+import * as MapModule from './map'
+
+const DummyMap = props => (
+  <div data-testid="map">
+    DummyMap {props.center.lat}:{props.center.long}
+  </div>
+)
+
+it('renders stubbed Map', () => {
+  // DummyMap component will be called with props and any other arguments
+  cy.stub(MapModule, 'default').callsFake(DummyMap)
+
+  cy.viewport(500, 500)
+  const center = { lat: 0, long: 0 }
+  mount(
+    <Contact
+      name="Joni Baez"
+      email="test@example.com"
+      site="http://test.com"
+      center={center}
+    />,
+  )
+
+  cy.contains('Contact Joni Baez via')
+  // confirm DummyMap renders "0:0" passed via props
+  cy.contains('[data-testid="map"]', '0:0').should('be.visible')
+})
+```
+
+![Dummy map test](images/dummy-map.png)

cypress/component/advanced/mocking-component/images/dummy-map.png

@@ -1,9 +1,11 @@
 import React from 'react'
 import { mount } from 'cypress-react-unit-test'
+// Component "Contact" has child component "Map" that is expensive to render
 import Contact from './contact'
 import Map from './map'
+import * as MapModule from './map'
 
-it('should render contact information', () => {
+describe('Mock imported component', () => {
   // mock Map component used by Contact component
   // whenever React tries to instantiate using Map constructor
   // call DummyMap constructor
@@ -12,22 +14,51 @@ it('should render contact information', () => {
       DummyMap {props.center.lat}:{props.center.long}
     </div>
   )
-  cy.stub(React, 'createElement')
-    .callThrough()
-    .withArgs(Map)
-    .callsFake((constructor, props) => React.createElement(DummyMap, props))
 
-  cy.viewport(500, 500)
-  const center = { lat: 0, long: 0 }
-  mount(
-    <Contact
-      name="Joni Baez"
-      email="test@example.com"
-      site="http://test.com"
-      center={center}
-    />,
-  )
+  context('by stubbing React.createElement method', () => {
+    // stubbing like this works, but is less than ideal
+    it('should render contact information', () => {
+      cy.stub(React, 'createElement')
+        .callThrough()
+        .withArgs(Map)
+        .callsFake((constructor, props) => React.createElement(DummyMap, props))
+
+      cy.viewport(500, 500)
+      const center = { lat: 0, long: 0 }
+      mount(
+        <Contact
+          name="Joni Baez"
+          email="test@example.com"
+          site="http://test.com"
+          center={center}
+        />,
+      )
+
+      cy.contains('Contact Joni Baez via')
+      cy.contains('[data-testid="map"]', '0:0').should('be.visible')
+    })
+  })
+
+  context('via mocking ES6 default import', () => {
+    // recommended
+    it('renders stubbed Map', () => {
+      // DummyMap component will be called with props and any other arguments
+      cy.stub(MapModule, 'default').callsFake(DummyMap)
+
+      cy.viewport(500, 500)
+      const center = { lat: 0, long: 0 }
+      mount(
+        <Contact
+          name="Joni Baez"
+          email="test@example.com"
+          site="http://test.com"
+          center={center}
+        />,
+      )
 
-  cy.contains('Contact Joni Baez via')
-  cy.contains('[data-testid="map"]', '0:0').should('be.visible')
+      cy.contains('Contact Joni Baez via')
+      // confirm DummyMap renders "0:0" passed via props
+      cy.contains('[data-testid="map"]', '0:0').should('be.visible')
+    })
+  })
 })