fix(hooks): flush useEffect hooks with a rerender

package.json

@@ -48,8 +48,8 @@
     "jest-dom": "^2.0.4",
     "jest-in-case": "^1.0.2",
     "kcd-scripts": "^0.44.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.7.0-alpha.0",
+    "react-dom": "^16.7.0-alpha.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

src/__tests__/render.js

@@ -1,5 +1,5 @@
 import 'jest-dom/extend-expect'
-import React from 'react'
+import React, {useEffect} from 'react'
 import ReactDOM from 'react-dom'
 import {render, cleanup} from '../'
 
@@ -90,3 +90,33 @@ it('supports fragments', () => {
   cleanup()
   expect(document.body.innerHTML).toBe('')
 })
+
+test('flushes hooks by default', () => {
+  let count = 0
+  const effectFn = jest.fn(() => {
+    count++
+  })
+  function SideEffectfulComponent() {
+    useEffect(effectFn)
+    return <div />
+  }
+  expect(count).toBe(0)
+  render(<SideEffectfulComponent />)
+  expect(effectFn).toHaveBeenCalled()
+  expect(count).toBe(1)
+})
+
+test('does not flush hooks if flushEffects option is false', () => {
+  let count = 0
+  const effectFn = jest.fn(() => {
+    count++
+  })
+  function SideEffectfulComponent() {
+    useEffect(effectFn)
+    return <div />
+  }
+  expect(count).toBe(0)
+  render(<SideEffectfulComponent />, {flushEffects: false})
+  expect(effectFn).not.toHaveBeenCalled()
+  expect(count).toBe(0)
+})

src/index.js

@@ -1,9 +1,13 @@
+import React from 'react'
 import ReactDOM from 'react-dom'
 import {getQueriesForElement, prettyDOM, fireEvent} from 'dom-testing-library'
 
 const mountedContainers = new Set()
 
-function render(ui, {container, baseElement = container, queries} = {}) {
+function render(
+  element,
+  {container, baseElement = container, queries, flushEffects = true} = {},
+) {
   if (!container) {
     // default to document.body instead of documentElement to avoid output of potentially-large
     // head elements (such as JSS style blocks) in debug output
@@ -15,8 +19,15 @@ function render(ui, {container, baseElement = container, queries} = {}) {
   // added to document.body so the cleanup method works regardless of whether
   // they're passing us a custom container or not.
   mountedContainers.add(container)
+  ReactDOM.render(element, container)
+
+  // useEffect hooks are always called before the next render;
+  // render again to trigger the effects
+  if (flushEffects) {
+    const Noop = () => null
+    ReactDOM.render(<Noop />, document.createElement('template'))
+  }
 
-  ReactDOM.render(ui, container)
   return {
     container,
     baseElement,