act does not support async callback

Versions

"react": "16.8.3"
"react-native": "0.59.5"
"react-test-renderer": "16.8.3"
"react-native-testing-library": "1.7.0"

Description

Unable to use async function as act callback without console errors. Either a console.error is emitted when not using act in the test (see Demo 1) or the test fails by using async callback in act (see Demo 2)

Now supported in react-testing-library: https://github.com/testing-library/react-testing-library/releases/tag/v6.1.0

Demo 1 (not wrapping in act)

import { render, act } from 'react-native-testing-library';
import Dialog from '...';

const Component = () => {
  const [result, setResult] = React.useState(null);
  return (
    <View>
      <Text>{result}</Text>
      <Dialog
        onSubmit={async value => {
          setResult(await doSomethingAsync(value));
        }}
      />
    </View>
  );
};

// ... then in test
  const elem = render(<Component />);
  const dialog = elem.getByType(Dialog);
  await dialog.props.onSubmit('value');

Emits console error: <span style="color:red">

Warning: An update to Component inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act

</span>

Demo 2 (wrapping with act -> test failure)

import { render, act } from 'react-native-testing-library';
import Dialog from '...';

const Component = () => {
  const [result, setResult] = React.useState(null);
  return (
    <View>
      <Text>{result}</Text>
      <Dialog
        onSubmit={async value => {
          setResult(await doSomethingAsync(value));
        }}
      />
    </View>
  );
};

// ... then in test
  const elem = render(<Component />);
  const dialog = elem.getByType(Dialog);
  await act(() => dialog.props.onSubmit('value'));

test failure with error: <span style="color:red">

Warning: The callback passed to TestRenderer.act(...) function must not return anything.

It looks like you wrote TestRenderer.act(async () => ...) or returned a Promise from it's callback. Putting asynchronous logic inside TestRenderer.act(...) is not supported.


console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:102
Warning: Do not await the result of calling TestRenderer.act(...), it is not a Promise.

</span>

[alexanderkrum]

For now I am using the jest --silent to disable react logging

[fabriziobertoglio1987]

https://github.com/facebook/jest/issues/7151