Skip to content

waitFor doesn't wait for response with useFakeTimers #983

Closed
@olegKusov

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions