waitFor doesn't wait for response with useFakeTimers

[olegKusov]

• @testing-library/react version: 12.0.0
• Testing Framework and version: jest 26.0.24
• DOM Environment:

Relevant code or config:

beforeEach(() => {
  jest.useFakeTimers();
})

afterEach(() => {
  jest.runOnlyPendingTimers();
  jest.useRealTimers();
});

describe('', () => {
it('should wait for response', async () => {
    renderWithProviders(<Component />, baseState);

    userEvent.click(screen.getByTestId('item-1'));
    userEvent.type(screen.getByTestId('search'), 'Apple juice');
    await waitForElementToBeRemoved(screen.getByTestId('loader'));
});

business logic

const setSearch = createEvent<string | null>();
const $search = restore<string | null>(setSearch, null);
const debouncedSearch = debounce({source: $search, timeout: 1000});

sample({
  clock: debouncedStoreItemSearch
  target: fetchSomeDataFx,
});


const loading = useStore(fetchSomeDataFx.pending);

const Component = () => {
return loading ? <Loader /> : <div>Loaded successfully!</div>
}

What you did:

I have effector as state manager and It has debounce function in patronum helper library. Under the hood it uses setTimeout, that's why I'm using jest fake timers.

What happened:

I saw this issue #661 and @kentcdodds fixed issue with fake timers but my test doesn't wait for response finish. I don't know why. When I log response it show me in console (Cannot log after tests are done. Did you forget to wait for something async in your test?). So it handle response well but doesn't wait for it.

[ms185730]

@olegKusov How was this resolved?

[hovsater]

@olegKusov I'm also interested in this. I'm seeing the exact same thing as the original author.

[catz]

Probably linked issue testing-library/react-hooks-testing-library#631