Requests not cleaned up between tests

[todor-a]

Hey,
I have the following setup:

const vacation = {
    id: '1'
};

const server = setupServer();
const queryClient = new QueryClient({});

describe('UserVacation', () => {
    afterAll(() => server.close());
    beforeAll(() => server.listen());

    afterEach(() => {
        jest.resetAllMocks();
        server.resetHandlers();
    });

    it('renders component correctly when user has active vacation', async () => {
        server.use(
            rest.get('https://api.io/users/1/vacations', (req, res, ctx) => {
                return res.once(ctx.json({ vacation }));
            })
        );

        render(
            <QueryClientProvider client={queryClient}>
                <UserVacation userId='1'/>,
            </QueryClientProvider>,
        );
        // ...
    });

    it('is able to select two substitutes and remove one', async () => {
        server.use(
            rest.get('https://api.io/users/1/vacations', (req, res, ctx) => {
                return res.once(ctx.json(undefined));
            })
        );

        render(
            <QueryClientProvider client={queryClient}>
                <UserVacation userId='1'/>,
            </QueryClientProvider>,
        );

      // ... fill out form

        server.use(
            rest.get('https://api.io/users/1/vacations', (req, res, ctx) => {
                return res(ctx.json({ vacation }));
            }),
        );
       
      // ... 
    });
});

In the first test I wish to simulate a case where the user has a active vacation, while in the second I wish to start with no vacation, perform some actions, and return a vacation when the endpoint is called a second time.

Where I struggle is cleaning up after the first test. If I .skip it, the second test passes successfully but I can't figure out why.

I realised what the issue is as I'm tying this up. Will post it anyway as it might help someone else down the road.

[todor-a]

The problem was that I was using react-query and the first fetch for a vacation was adding the vacation to the cache.

I needed to add queryClient.clear(); to the afterEach.