Typescript act() got warning 'await' has no effect on the type of this expression.

[qaynam]

Describe the bug

when i use act with typescript , got warning like 👇

Steps to Reproduce

@testing-library/react-native/build/act.d.ts

declare global {
    var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
}
declare function setIsReactActEnvironment(isReactActEnvironment: boolean | undefined): void;
declare function getIsReactActEnvironment(): boolean | undefined;
- declare const act: (callback: () => void) => void;
+ declare const act: <T>(callback: () => T) => T;
export default act;
export { setIsReactActEnvironment as setReactActEnvironment, getIsReactActEnvironment, };

Versions

[mdjastrzebski]

Looking at @types/react-test-render theirs act has following type:

export function act(callback: () => Promise<VoidOrUndefinedOnly>): Promise<undefined>;

As far as I understand the intention of async act is to allow for waiting for Promise returned by callback to resolve, but not to use it's return value in any way. We could actually tweak our typings to match @types/react-test-render ones.

RTL does hits in the following way:

/**
 * Simply calls ReactDOMTestUtils.act(cb)
 * If that's not available (older version of react) then it
 * simply calls the given callback immediately
 */
export const act: typeof reactAct extends undefined
  ? (callback: () => void) => void
  : typeof reactAct

@qaynam Would such solution satisfy your use case?

[trajano]

I'm not sure how you'd declare it in the act.ts file but the generated act.d.ts file should have these two lines

declare const act: (callback: () => void) => void;
declare const act: (callback: () => Promise<VoidOrUndefinedOnly>): Promise<undefined>;

You have to also ensure that the linters will allow

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

Since these are valid cases where the useEffect performs an async operation that needs to be waited on.

[trajano]

I referenced this bug in https://stackoverflow.com/questions/64848604/how-to-resolve-act-in-useeffect/71949404#71949404 for more complete examples