React-native-testing-library: act does not support async callback

[Iskander508]

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:

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

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:

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.

[Iskander508]

I have just tried to update the dependencies to:

"react": "16.9.0-alpha.0"
"react-test-renderer": "16.9.0-alpha.0"

which solves the issue and enables the Demo 2 syntax without any warnings. So we probably just need to wait for next react release.

[thymikee]

Yup, but it's still not yet supported by RN. Hopefully you won't mind me closing this issue. Thanks for reporting and coming back!

[alexanderkrum]

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

[fabriziobertoglio1987]

@callstack-team I decided to post this message as my Pull-Request https://github.com/fabriziobertoglio1987/react-native-task/pull/5 and commits are referencing this issue

I experienced this problem. act would trigger the warning with this async function. Removing async..await would remove the warning.

async function fetchRows() {
  const result = await fetchRowsFromApi(param);
}

This solution worked in my case:

1) Upgrade to [email protected], [email protected], [email protected] and "react-native-testing-library": "^2.0.0"

2) https://github.com/facebook/react/pull/14853#issue-253114353

test('renders lists', async () => {
   // ... 
    await act(async () => { 
      await fireEvent.changeText(searchInput, "f")
    });
}

[fabriziobertoglio1987]

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