feat: add support for async act

Author: bcarroll22

package.json

@@ -34,7 +34,7 @@
   "license": "MIT",
   "dependencies": {
     "pretty-format": "^24.5.0",
-    "react-test-renderer": "^16.8.5",
+    "react-test-renderer": "^16.9.0-alpha.0",
     "wait-for-expect": "^1.1.1"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "metro-react-native-babel-preset": "^0.52.0",
     "prettier": "^1.16.4",
     "pretty-quick": "^1.10.0",
-    "react": "^16.8.5",
+    "react": "^16.9.0-alpha.0",
     "react-intl": "^2.8.0",
     "react-intl-native": "^2.1.2",
     "react-native": "^0.59.0",

src/__tests__/events.js

@@ -67,7 +67,7 @@ test('calling a handler if a Touchable is disabled throws', () => {
   const { getByText } = render(
     <TouchableHighlight disabled onPress={jest.fn()}>
       <Text>touchable</Text>
-    </TouchableHighlight>
+    </TouchableHighlight>,
   );
   expect(() => fireEvent.press(getByText('touchable'))).toThrow();
   expect(handleEvent).toBeCalledTimes(0);

src/__tests__/old-act.js

@@ -0,0 +1,37 @@
+import { asyncAct } from '../act-compat';
+
+jest.mock('react-test-renderer', () => ({
+  act: cb => {
+    const promise = cb();
+    return {
+      then() {
+        console.error('blah, do not do this');
+        return promise;
+      },
+    };
+  },
+}));
+
+test('async act works even when the act is an old one', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+  const callback = jest.fn();
+  await asyncAct(async () => {
+    await Promise.resolve();
+    await callback();
+  });
+  expect(console.error.mock.calls).toMatchInlineSnapshot(`Array []`);
+  expect(callback).toHaveBeenCalledTimes(1);
+
+  // and it doesn't warn you twice
+  callback.mockClear();
+  console.error.mockClear();
+
+  await asyncAct(async () => {
+    await Promise.resolve();
+    await callback();
+  });
+  expect(console.error).toHaveBeenCalledTimes(0);
+  expect(callback).toHaveBeenCalledTimes(1);
+
+  console.error.mockRestore();
+});

src/__tests__/wait-for-element-to-be-removed.fake-timers.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { render } from '../';
+import { waitForElementToBeRemoved } from '../wait-for-element-to-be-removed';
+
+jest.useFakeTimers();
+
+test('requires a function as the first parameter', () => {
+  return expect(waitForElementToBeRemoved()).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"waitForElementToBeRemoved requires a callback as the first parameter"`,
+  );
+});
+
+test('requires an element to exist first', () => {
+  return expect(waitForElementToBeRemoved(() => null)).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist before waiting for removal."`,
+  );
+});
+
+test('requires an unempty array of elements to exist first', () => {
+  return expect(waitForElementToBeRemoved(() => [])).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist before waiting for removal."`,
+  );
+});
+
+test('times out after 4500ms by default', () => {
+  const { rootInstance } = render(<View />);
+  const promise = expect(
+    waitForElementToBeRemoved(() => rootInstance),
+  ).rejects.toThrowErrorMatchingInlineSnapshot(`"Timed out in waitForElementToBeRemoved."`);
+
+  jest.advanceTimersByTime(4501);
+
+  return promise;
+});

src/__tests__/wait-for-element-to-be-removed.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { render } from '../';
+import { waitForElementToBeRemoved } from '../wait-for-element-to-be-removed';
+
+test('resolves only when the element is removed', async () => {
+  class MutatedElement extends React.Component {
+    state = {
+      text: 'original',
+      visible: true,
+    };
+
+    componentDidMount() {
+      // mutation
+      this.setState({ text: 'mutated' });
+
+      // removal
+      setTimeout(() => {
+        this.setState({ visible: false });
+      }, 100);
+    }
+
+    render() {
+      return this.state.visible ? <View testID="view">{this.state.text}</View> : null;
+    }
+  }
+
+  const { queryAllByTestId } = render(<MutatedElement />);
+
+  // the timeout is here for two reasons:
+  // 1. It helps test the timeout config
+  // 2. The element should be removed immediately
+  //    so if it doesn't in the first 100ms then we know something's wrong
+  //    so we'll fail early and not wait the full timeout
+  await waitForElementToBeRemoved(() => queryAllByTestId('view'), { timeout: 500 });
+});
+
+test('resolves on mutation if callback throws an error', async () => {
+  class MutatedElement extends React.Component {
+    state = {
+      visible: true,
+    };
+
+    componentDidMount() {
+      setTimeout(() => {
+        this.setState({ visible: false });
+      });
+    }
+
+    render() {
+      return this.state.visible ? <View testID="view" /> : null;
+    }
+  }
+
+  const { getByTestId } = render(<MutatedElement />);
+
+  await waitForElementToBeRemoved(() => getByTestId('view'), { timeout: 100 });
+});

src/act-compat.js

@@ -1,13 +1,42 @@
-import { act as trAct } from 'react-test-renderer';
+let reactAct;
+let actSupported = false;
+let asyncActSupported = false;
+
+try {
+  reactAct = require('react-test-renderer').act;
+  actSupported = reactAct !== undefined;
+
+  const originalError = console.error;
+  let errorCalled = false;
+  console.error = () => {
+    errorCalled = true;
+  };
+  console.error.calls = [];
+  /* istanbul ignore next */
+  reactAct(() => ({ then: () => {} })).then(() => {});
+  /* istanbul ignore next */
+  if (!errorCalled) {
+    asyncActSupported = true;
+  }
+  console.error = originalError;
+} catch (error) {
+  // ignore, this is to support old versions of react
+}
 
 function actPolyfill(callback) {
   callback();
 }
 
-const act = trAct || actPolyfill;
+const act = reactAct || actPolyfill;
 
-function rntlAct(callback) {
-  return act(callback);
+async function asyncActPolyfill(cb) {
+  await cb();
+  // make all effects resolve after
+  act(() => {});
 }
 
-export default rntlAct;
+// istanbul ignore next
+const asyncAct = asyncActSupported ? reactAct : asyncActPolyfill;
+
+export default act;
+export { asyncAct };

src/config.js

@@ -0,0 +1,15 @@
+import { asyncAct } from './act-compat';
+
+let config = {
+  asyncWrapper: async cb => {
+    let result;
+    asyncAct(() => {
+      result = cb();
+    });
+    return result;
+  },
+};
+
+export function getConfig() {
+  return config;
+}

src/index.js

@@ -24,7 +24,11 @@ function render(ui, { options = {}, wrapper: WrapperComponent } = {}) {
     rootInstance: container.root,
     debug: (el = container) => console.log(prettyPrint(el)),
     unmount: () => container.unmount(),
-    rerender: rerenderUi => container.update(wrapUiIfNeeded(rerenderUi)),
+    rerender: rerenderUi => {
+      act(() => {
+        container.update(wrapUiIfNeeded(rerenderUi));
+      });
+    },
     ...getQueriesForElement(container),
   };
 }
@@ -43,17 +47,10 @@ function renderHook(callback, { initialProps, ...options } = {}) {
 
   return {
     result,
-    waitForNextUpdate: () =>
-      new Promise(resolve =>
-        act(() => {
-          addResolver(resolve);
-        }),
-      ),
+    waitForNextUpdate: () => new Promise(resolve => addResolver(resolve)),
     rerender: (newProps = hookProps.current) => {
       hookProps.current = newProps;
-      act(() => {
-        rerenderComponent(toRender());
-      });
+      rerenderComponent(toRender());
     },
     unmount,
   };
@@ -85,6 +82,7 @@ export * from './queries';
 export * from './query-helpers';
 export * from './wait';
 export * from './wait-for-element';
+export * from './wait-for-element-to-be-removed';
 export { getDefaultNormalizer } from './matches';
 
 export { act, fireEvent, queries, queryHelpers, render, renderHook, NativeEvent };

src/pretty-print.js

@@ -9,7 +9,7 @@ function getPrettyOutput(reactElement, maxLength, options) {
     ...options,
   });
 
-  return maxLength !== undefined && reactElement.toString().length > maxLength
+  return maxLength !== undefined && debugContent && debugContent.toString().length > maxLength
     ? `${debugContent.slice(0, maxLength)}...`
     : debugContent;
 }

src/wait-for-element-to-be-removed.js

@@ -0,0 +1,61 @@
+import { getConfig } from './config';
+import { getSetImmediate } from './helpers';
+
+function waitForElementToBeRemoved(callback, { container, interval = 50, timeout = 4500 } = {}) {
+  return new Promise((resolve, reject) => {
+    if (typeof callback !== 'function') {
+      reject(new Error('waitForElementToBeRemoved requires a callback as the first parameter'));
+      return;
+    }
+    const timer = setTimeout(onTimeout, timeout);
+    let observer;
+
+    // Check if the element is not present
+    /* istanbul ignore next */
+    const result = container ? callback(container) : callback();
+    if (!result || (Array.isArray(result) && !result.length)) {
+      onDone(
+        new Error(
+          'The callback function which was passed did not return an element or non-empty array of elements. waitForElementToBeRemoved requires that the element(s) exist before waiting for removal.',
+        ),
+      );
+    }
+
+    observer = setTimeout(onMutation);
+
+    function onDone(error, result) {
+      const setImmediate = getSetImmediate();
+      clearTimeout(timer);
+      setImmediate(() => clearTimeout(observer));
+      if (error) {
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    }
+
+    function onMutation() {
+      try {
+        /* istanbul ignore next */
+        const result = container ? callback(container) : callback();
+        if (!result || (Array.isArray(result) && !result.length)) {
+          onDone(null, true);
+        } else {
+          observer = setTimeout(onMutation, interval);
+        }
+      } catch (error) {
+        onDone(null, true);
+      }
+    }
+
+    function onTimeout() {
+      onDone(new Error('Timed out in waitForElementToBeRemoved.'), null);
+    }
+  });
+}
+
+function waitForElementToBeRemovedWrapper(...args) {
+  return getConfig().asyncWrapper(() => waitForElementToBeRemoved(...args));
+}
+
+export { waitForElementToBeRemovedWrapper as waitForElementToBeRemoved };

src/wait-for-element.js

@@ -1,3 +1,4 @@
+import { getConfig } from './config';
 import { getSetImmediate } from './helpers';
 
 function waitForElement(callback, { container, interval = 50, timeout = 4500 } = {}) {
@@ -40,4 +41,8 @@ function waitForElement(callback, { container, interval = 50, timeout = 4500 } =
   });
 }
 
-export { waitForElement };
+function waitForElementWrapper(...args) {
+  return getConfig().asyncWrapper(() => waitForElement(...args));
+}
+
+export { waitForElementWrapper as waitForElement };

src/wait.js

@@ -1,7 +1,13 @@
 import waitForExpect from 'wait-for-expect';
 
+import { getConfig } from './config';
+
 function wait(callback = () => {}, { timeout = 4500, interval = 50 } = {}) {
   return waitForExpect(callback, timeout, interval);
 }
 
-export { wait };
+function waitWrapper(...args) {
+  return getConfig().asyncWrapper(() => wait(...args));
+}
+
+export { waitWrapper as wait };