Typing of `act` broken

[mstykow]

Describe the bug

The act function exported by @testing-library/react-native is always of type (callback: () => void) => void. However, the underlying function coming from react-test-renderer also has overloads for promises which are incorrectly suppressed.

This error in typing leads to linter errors when one tries to pass promise-returning callbacks to act or tries to await a promise-returning act.

Expected behavior

The act function should have the same typing as the underlying function from react-test-renderer.

Steps to Reproduce

The following snippet will produce linter errors such as this one, depending on one's linter configuration.

import { act } from '@testing-library/react-native'

await act(async () => {
  await Promise.resolve();
});

Versions

@testing-library/react-native: ^11.3.0 => 11.3.0 
react: 18.0.0 => 18.0.0 
react-native: 0.69.6 => 0.69.6 
react-test-renderer: ^18.2.0 => 18.2.0

[mdjastrzebski]

@mstykow Ciule you submit a PR for that?

[mstykow]

@mdjastrzebski the problem seems to be here in the flow typings: https://github.com/callstack/react-native-testing-library/blob/main/typings/index.flow.js#L421

Why are you using flow at all when your library is mostly TypeScript? Ideally we'd just forward the correct TypeScript type instead of overriding it with these flow definitions.

[mstykow]

Never mind, I misunderstood something. I see the problem now is in the actual act.ts file.

[mstykow]

OK, I can open a PR but it seems I don't have permissions to create a branch.

[AugustinLF]

OK, I can open a PR but it seems I don't have permissions to create a branch.

You'll need to fork the repo and create a branch there. You'll then be able to create a PR back to this repo from yours.

Please modify both the TS and flow types :)

[mdjastrzebski]

@mstykow I've closed your PR without merging as it worked by overriding the act type definition instead of actually verifying the related types.

I am curious what is your use cases for needing explicit act access in your tests. RNTL should already wrap all relevant calls to React/React Test Render with act when needed.

BTW from your deps it seems that you have a mismatch between react and react-test-renderer versions. They need to use the same version, otherwise weird things might happen.

@testing-library/react-native: ^11.3.0 => 11.3.0 
react: 18.0.0 => 18.0.0 
react-native: 0.69.6 => 0.69.6 
react-test-renderer: ^18.2.0 => 18.2.0

[AugustinLF]

I am curious what is your use cases for needing explicit act access in your tests. RNTL should already wrap all relevant calls to React/React Test Render with act when needed.

There are valid use cases, like triggering event listeners, or other non UI related state change (we for instance have test triggering an event that happens when the user has been idle for more than x minutes we then lower their privileges). And those events could trigger some behaviour on react's side (hiding some UI, triggering some effects, etc.).

[mdjastrzebski]

@AugustinLF would you like to work on improving the act typings?

[AugustinLF]

I'm struggling with time right now, got a lot going on at work, so won't be able to do that right now 😞 (and I'm not personally impacted because we use the types of RTL's act).