feat: wrap render with act() for better React Hooks support (#122)

Author: Esemesek

docs/API.md

@@ -379,3 +379,7 @@ const { queryAllByText } = render(<Forms />);
 const submitButtons = queryAllByText('submit');
 expect(submitButtons).toHaveLength(3); // expect 3 elements
 ```
+
+## `act`
+
+Useful function to help testing components that use hooks API. By default any `render` and `fireEvent` calls are wrapped by this function, so there is no need to wrap it manually. This method is re-exported from [`react-test-renderer`](https://github.com/facebook/react/blob/master/packages/react-test-renderer/src/ReactTestRenderer.js#L567]).

flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -9,13 +9,13 @@ type ReactComponentInstance = React$Component<any>;
 type ReactTestRendererJSON = {
   type: string,
   props: { [propName: string]: any },
-  children: null | ReactTestRendererJSON[]
+  children: null | ReactTestRendererJSON[],
 };
 
 type ReactTestRendererTree = ReactTestRendererJSON & {
-  nodeType: "component" | "host",
+  nodeType: 'component' | 'host',
   instance: ?ReactComponentInstance,
-  rendered: null | ReactTestRendererTree
+  rendered: null | ReactTestRendererTree,
 };
 
 type ReactTestInstance = {
@@ -40,30 +40,36 @@ type ReactTestInstance = {
   findAllByProps(
     props: { [propName: string]: any },
     options?: { deep: boolean }
-  ): ReactTestInstance[]
+  ): ReactTestInstance[],
 };
 
 type TestRendererOptions = {
-  createNodeMock(element: React$Element<any>): any
+  createNodeMock(element: React$Element<any>): any,
+};
+
+type Thenable = {
+  then(resolve: () => mixed, reject?: () => mixed): mixed,
 };
 
-declare module "react-test-renderer" {
+declare module 'react-test-renderer' {
   declare export type ReactTestRenderer = {
     toJSON(): null | ReactTestRendererJSON,
     toTree(): null | ReactTestRendererTree,
     unmount(nextElement?: React$Element<any>): void,
     update(nextElement: React$Element<any>): void,
     getInstance(): ?ReactComponentInstance,
-    root: ReactTestInstance
+    root: ReactTestInstance,
   };
 
   declare function create(
     nextElement: React$Element<any>,
     options?: TestRendererOptions
   ): ReactTestRenderer;
+
+  declare function act(callback: () => void): Thenable;
 }
 
-declare module "react-test-renderer/shallow" {
+declare module 'react-test-renderer/shallow' {
   declare export default class ShallowRenderer {
     static createRenderer(): ShallowRenderer;
     getMountedInstance(): ReactTestInstance;

package.json

@@ -24,9 +24,9 @@
     "flow-copy-source": "^2.0.2",
     "jest": "^24.1.0",
     "metro-react-native-babel-preset": "^0.49.1",
-    "react": "16.6.3",
+    "react": "^16.8.3",
     "react-native": "^0.58.3",
-    "react-test-renderer": "16.6.3",
+    "react-test-renderer": "^16.8.3",
     "release-it": "^10.0.0",
     "strip-ansi": "^5.0.0",
     "typescript": "^3.1.1"
@@ -50,7 +50,10 @@
   },
   "jest": {
     "preset": "react-native",
-    "moduleFileExtensions": ["js", "json"]
+    "moduleFileExtensions": [
+      "js",
+      "json"
+    ]
   },
   "greenkeeper": {
     "ignore": [

src/__tests__/act.test.js

@@ -0,0 +1,50 @@
+// @flow
+import React from 'react';
+import { Text } from 'react-native';
+import ReactTestRenderer from 'react-test-renderer';
+import act from '../act';
+import render from '../render';
+import fireEvent from '../fireEvent';
+
+const UseEffect = ({ callback }: { callback: Function }) => {
+  React.useEffect(callback);
+  return null;
+};
+
+const Counter = () => {
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <Text testID="counter" onPress={() => setCount(count + 1)}>
+      {count}
+    </Text>
+  );
+};
+
+test('render should trigger useEffect', () => {
+  const effectCallback = jest.fn();
+  render(<UseEffect callback={effectCallback} />);
+
+  expect(effectCallback).toHaveBeenCalledTimes(1);
+});
+
+test('fireEvent should trigger useState', () => {
+  const { getByTestId } = render(<Counter />);
+  const counter = getByTestId('counter');
+
+  expect(counter.props.children).toEqual(0);
+  fireEvent.press(counter);
+  expect(counter.props.children).toEqual(1);
+});
+
+test('should act even if there is no act in react-test-renderer', () => {
+  // $FlowFixMe
+  ReactTestRenderer.act = undefined;
+  const callback = jest.fn();
+
+  act(() => {
+    callback();
+  });
+
+  expect(callback).toHaveBeenCalled();
+});

src/act.js

@@ -0,0 +1,8 @@
+// @flow
+import { act } from 'react-test-renderer';
+
+const actMock = (callback: () => void) => {
+  callback();
+};
+
+export default act || actMock;

src/fireEvent.js

@@ -1,4 +1,5 @@
 // @flow
+import act from './act';
 import { ErrorWithStack } from './helpers/errors';
 
 const findEventHandler = (element: ReactTestInstance, eventName: string) => {
@@ -23,10 +24,16 @@ const invokeEvent = (
   element: ReactTestInstance,
   eventName: string,
   data?: *
-) => {
+): any => {
   const handler = findEventHandler(element, eventName);
 
-  return handler(data);
+  let returnValue;
+
+  act(() => {
+    returnValue = handler(data);
+  });
+
+  return returnValue;
 };
 
 const toEventHandlerName = (eventName: string) =>

src/index.js

@@ -1,4 +1,5 @@
 // @flow
+import act from './act';
 import render from './render';
 import shallow from './shallow';
 import flushMicrotasksQueue from './flushMicrotasksQueue';
@@ -12,3 +13,4 @@ export { flushMicrotasksQueue };
 export { debug };
 export { fireEvent };
 export { waitForElement };
+export { act };

src/render.js

@@ -1,20 +1,26 @@
 // @flow
 import * as React from 'react';
-import TestRenderer from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies
+import TestRenderer, { type ReactTestRenderer } from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies
+import act from './act';
 import { getByAPI } from './helpers/getByAPI';
 import { queryByAPI } from './helpers/queryByAPI';
 import debugShallow from './helpers/debugShallow';
 import debugDeep from './helpers/debugDeep';
 
+type Options = {
+  createNodeMock: (element: React.Element<any>) => any,
+};
+
 /**
  * Renders test component deeply using react-test-renderer and exposes helpers
  * to assert on the output.
  */
 export default function render(
   component: React.Element<any>,
-  options?: { createNodeMock: (element: React.Element<any>) => any }
+  options?: Options
 ) {
-  const renderer = TestRenderer.create(component, options);
+  const renderer = renderWithAct(component, options);
+
   const instance = renderer.root;
 
   return {
@@ -27,6 +33,19 @@ export default function render(
   };
 }
 
+function renderWithAct(
+  component: React.Element<any>,
+  options?: Options
+): ReactTestRenderer {
+  let renderer: ReactTestRenderer;
+
+  act(() => {
+    renderer = TestRenderer.create(component, options);
+  });
+
+  return ((renderer: any): ReactTestRenderer);
+}
+
 function debug(instance: ReactTestInstance, renderer) {
   function debugImpl(message?: string) {
     return debugDeep(renderer.toJSON(), message);

typings/__tests__/index.test.tsx

@@ -7,6 +7,7 @@ import {
   flushMicrotasksQueue,
   debug,
   waitForElement,
+  act,
 } from '../..';
 
 interface HasRequiredProp {
@@ -131,3 +132,7 @@ const waitBy: Promise<ReactTestInstance> = waitForElement<ReactTestInstance>(
 const waitByAll: Promise<Array<ReactTestInstance>> = waitForElement<
   Array<ReactTestInstance>
 >(() => tree.getAllByName('View'), 1000, 50);
+
+act(() => {
+  render(<TestComponent />);
+});

typings/index.d.ts

@@ -33,6 +33,10 @@ export interface QueryByAPI {
   ) => Array<ReactTestInstance> | [];
 }
 
+export interface Thenable {
+  then: (resolve: () => any, reject?: () => any) => any,
+}
+
 export interface RenderOptions {
   createNodeMock: (element: React.ReactElement<any>) => any;
 }
@@ -86,3 +90,4 @@ export declare const flushMicrotasksQueue: () => Promise<any>;
 export declare const debug: DebugAPI;
 export declare const fireEvent: FireEventAPI;
 export declare const waitForElement: WaitForElementFunction;
+export declare const act: (callback: () => void) => Thenable;