Changing Mock Server Response inside tests

[enszrlu]

Hi, I am trying to mock my server with conditions so that I can change the response in each test. But getting below result. Somehow when I change the shouldReturnEmpty on third test it does not read it but it affects the 4th test. (Third and forth tests are exactly same.)

Why would this happen, is there any better solution for this?

let hitCount = 0;
let shouldReturnError = false;
let shouldReturnEmpty = false;

const mockServer = setupServer(
  rest.get(url, (req, res, ctx) => {
    hitCount++;
    if (shouldReturnError) {
      return res(ctx.status(500, 'MOCK Internal Server Error'));
    } else if (shouldReturnEmpty) {
      return res(ctx.json({ data: [] }));
    }
    return res(ctx.json({ data: expectedData.data }));
  })
);

  ❯ useXXXXXTests (4)
     ✓ should fetch the correct url
     ❯ Happy Path: (3)
       ✓ should fetch data successfully
       × should return empty array when no plans are found
       ✓ should return empty array when no plans are found

3rd & 4th Tests:

it('should return empty array when no plans are found', async () => {
      shouldReturnEmpty = true;

      const { result } = renderHook(() => useGetPlans(), { wrapper });

      await waitFor(() => result.current.isSuccess);

      expect(result.current.data).toEqual({ data: [], error: undefined });
    });

  beforeAll(() => mockServer.listen());

  afterEach(() => {
    mockServer.resetHandlers();
    hitCount = 0;
    shouldReturnError = false;
    shouldReturnEmpty = false;
  });

  afterAll(() => mockServer.close());

[enszrlu]

Edit: In case anyone would have this issue in the future, how you need to use waitFor is changed with React 18+, see below. Also clear queryClient after each test!

await waitFor(() => expect(result.current.isSuccess).toBe(true));