add example re-rendering component after changing props (#426)

Author: bahmutov

README.md

@@ -142,6 +142,7 @@ Spec | Description
 [css modules](cypress/component/basic/css-modules) | Shows that component that using css modules styles works
 [network](cypress/component/basic/network) | Confirms we can use `cy.route` to stub / spy on component's network calls
 [no-visit](cypress/component/basic/no-visit) | Component specs cannot call `cy.visit`
+[re-render](cypress/component/basic/re-render) | Checking how the component re-renders when its props change
 [react-book-by-chris-noring](cypress/component/basic/react-book-by-chris-noring) | Copied test examples from [React Book](https://softchris.github.io/books/react) and adapted for Cypress component tests
 [react-tutorial](cypress/component/basic/react-tutorial) | Tests from official [ReactJS tutorial](https://reactjs.org/tutorial/tutorial.html) copied and adapted for Cypress component tests
 [stub-example](cypress/component/basic/stub-example) | Uses `cy.stub` as component props

cypress/component/basic/re-render/README.md

@@ -0,0 +1,5 @@
+# re-render
+
+If you want to see how a component re-renders in reaction to changed props, you have to make a mini-web app around it. See [spec.js](spec.js) but in essence you never keep the component, but create a new one.
+
+![Spec](images/my-input.gif)

cypress/component/basic/re-render/images/my-input.gif

@@ -0,0 +1,42 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+
+const MyInput = ({ inputVal, onInputChanged }) => {
+  console.log('MyInput "%s"', inputVal)
+  return (
+    <>
+      <input
+        type="text"
+        value={inputVal}
+        onChange={e => onInputChanged(e.target.value)}
+      />
+      <p>You entered {inputVal} </p>
+    </>
+  )
+}
+
+describe('My Input', () => {
+  it('updates when props change', () => {
+    // can we shorten this example
+    // that checks if the MyInput is re-rendering?
+    const App = () => {
+      const [message, setMessage] = React.useState('')
+      return (
+        <>
+          <MyInput
+            inputVal={message}
+            onInputChanged={newValue => {
+              setMessage(newValue)
+              return null
+            }}
+          />
+        </>
+      )
+    }
+    mount(<App />)
+
+    /* Update props */
+    cy.get('input').type('hello there!')
+    cy.contains('You entered hello there!')
+  })
+})