Assert in between to async actions

I have a scenario where when the screen (component) I’m testing makes an API request on initial render and upon a successful result queries the async storage for a stored value. Obviously, both methods are mocked.

I want to test the message shown to the user on-screen when these two things are happening is correct.

const { queryByText, queryByA11yRole } = setup();
await waitForElementToBeRemoved(() => queryByText('Checking API...'));
expect(queryByText('Checking async storage...')).toBeTruthy();
// asserting whether the correct methods were called

This is how I try to test this. But no matter what configuration I use for waitForElementToBeRemoved such as { timeout:4500, interval:1 } my assertion for the second message always fails, because, by then the app has gone past the render where it queries async storage, got the result and done the rest and rendered accordingly.

Asserting whether the correct methods were called is successful but I want to verify the messages are shown to the user as well.

How do I go about testing this?

[Luk-kar]

For this case, you can use waitFor instead. waitFor takes a function and retries until it stops throwing errors.

await waitFor(() => { 
  expect(queryByText('Checking API...')).toBeNull();
  expect(queryByText('Checking async storage...')).toBeTruthy();
});

When I write the following code:

        await waitFor(() => {
            expect(getByText("Some string")).toBeNull();
        });

Got error: Unable to find an element with text: Some string

[Kamalnrf]

For this case, you can use waitFor instead. waitFor takes a function and retries until it stops throwing errors.

await waitFor(() => { 
  expect(queryByText('Checking API...')).toBeNull();
  expect(queryByText('Checking async storage...')).toBeTruthy();
});