feat: add cy.render method, close #122

Author: bahmutov

README.md

@@ -113,6 +113,20 @@ cy.mount(<Button name='Orange' orange />, null, { cssFile })
 
 See [cypress/integration/inject-style-spec.js](cypress/integration/inject-style-spec.js) for more examples.
 
+### re-render
+
+Sometimes you need to re-render the component, for example when a Redux store changes. After `cy.mount` completes (asynchronously), you can call `cy.render(JSXElement)` method.
+
+```js
+cy.mount(<El text='first' />)
+cy.contains('first')
+  .then(() => {
+    cy.render(<El text='second' />)
+  })
+```
+
+See [bahmutov/redux-counter-example](https://github.com/bahmutov/redux-counter-example) example spec file [src/App.cy-spec.js](https://github.com/bahmutov/redux-counter-example/blob/master/src/App.cy-spec.js).
+
 ## Configuration
 
 If your React and React DOM libraries are installed in non-standard paths (think monorepo scenario), you can tell this plugin where to find them. In `cypress.json` specify paths like this:

cypress/integration/rerender-spec.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+import React from 'react'
+
+/* eslint-env mocha */
+describe('re-render', () => {
+  it('works with El', () => {
+    const El = ({ text }) => <div>{text}</div>
+    cy.mount(<El text='first' />)
+    cy.contains('first')
+      .then(() => {
+        cy.render(<El text='second' />)
+      })
+    cy.contains('second')
+  })
+})

lib/index.d.ts

@@ -76,5 +76,10 @@ declare namespace Cypress {
     **/
     mount: (component: JSXElement, alias?: string, options?: Partial<MountOptions>) => Chainable<void>
     get<S = any>(alias: string | symbol | Function, options?: Partial<Loggable & Timeoutable>): Chainable<any>
+    /**
+     * Utility method to re-render a new / updated component
+     * Should only be called AFTER `cy.mount`
+     */
+    render: (jsx: JSXElement) => void
   }
 }

lib/index.ts

@@ -155,10 +155,14 @@ export const mount = (jsx: JSXElement, alias?: string, options?: Partial<MountOp
     .then(win => {
       const { ReactDOM } = win as Window & {ReactDOM: any}
       const document = cy.state('document')
-      const component = ReactDOM.render(
-        jsx,
-        document.getElementById('cypress-jsdom')
-      )
+      const target: Element = document.getElementById('cypress-jsdom')
+
+      const render = (currentJsx: JSXElement) => ReactDOM.render(currentJsx, target)
+      // expose utility to re-render a component from tests
+      cy.render = (jsx: JSXElement) => {
+        render(jsx)
+      }
+      const component = render(jsx);
       cy.wrap(component, { log: false }).as(alias || displayname)
     })
   cy.copyComponentStyles(jsx)