Testing library: You called act(async () => ...) without await

Question

I'm writing some react unit tests and I keep getting this warning in my console but I'm not sure if I'm actually doing anything wrong.

it('correctly returns postcodes found', async () => {
        const { input, user, onPostcodeLookup } = setup();

        act(async () => {
            user.type(input, 'NG1 6DQ');

            await waitFor(() => {
                expect(onPostcodeLookup).toHaveBeenCalled();
                expect(onPostcodeLookup).toHaveBeenCalledWith([mockedData]);
            });
        });
    });

The warning I get is:

 Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);

The test:

1. Finds the postcode input
2. Types a postcode (using the user-event library)
3. Waits for some async callbacks to be called

But I legitimately don't think there's any other way to write this test...

If I remove act, I get this error:

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

If instead I remove async and await from act I get:

 Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one.

If I just wrap my user.type in act I get:

 Warning: You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one

Is this a bug? I cannot figure out how I'm supposed to write this.

Answer 1

I'm not sure what setup is, but if it's a DOM representation this might work using fireEvent from RTL:

it('correctly returns postcodes found', async () => {
  const { input, user, onPostcodeLookup } = setup();

  fireEvent.change(input, { target: { value: 'NG1 6DQ' } });

  await waitFor(() => {
    expect(onPostcodeLookup).toHaveBeenCalled();
    expect(onPostcodeLookup).toHaveBeenCalledWith([mockedData]);
  });
});