Simulating delayed server responses in tests to validate button state on failure

[rizametovd]

Hi

I'd like to write a test for scenario:

1. User clicks on a button.
2. Button disables.
3. Request is sent to server. Pending request for 20 seconds and then fails.
4. If request fails then button should be active.

Mock

const getCustomerPortalMock = () => {
  return http.get(`${BASE_URL}/api/payments/billing_portal`, async () => {
    await delay(20_000);
    return HttpResponse.error();
  });
};

Function called on button click

  const openCustomerPortal = async () => {
    try {
      setIsLoading(true);

      await getCustomerPortalLink.mutateAsync(); // throws error

    } catch {
      setIsLoading(false); // should make button active on error
    }
  };

Mock usage

  it('should make Update Billing button active if request is failed', async () => {
    server.use(getCustomerPortalMock());
    const user = userEvent.setup();

    render(<UpdateVATLocationBanner />);

    const button = screen.getByRole('button', { name: /update billing/i });

    await user.click(button);

    expect(button).toBeDisabled(); // step 2

    await waitFor(() => {
      expect(button).toBeEnabled(); // step 4
    });
  });

I expect that the test will take around 20 seconds to pass because of the request delay in mock but actually it passes in about couple of seconds which resulted in incorrect test behavior (the 4 step will always pass no matter if expect(button).toBeEnabled() or expect(button).toBeDisabled();.

My mock is incorrect? If so then how to make it work the expected way?

[kettanaito]

Hi.

Your test setup looks okay. Just make sure to use fake timers in your testing framework so that your test doesn't actually wait 20s—that's a needless overhead. Put the delay, write the actions , then vi.advanceTimersByTime(20_000) and assert. That's how I'd test it.

[rizametovd]

@kettanaito I think there's misunderstanding.

I literally want my test to stop and wait for 20sec until request fails. But test executed in couple of seconds.

So I think the await delay(20000) not working or I misuse server.mock or might be other mistake in my test.

I understand that 20s is overhead. But it's just for studying purposes. I'm new to MSW and testing, so I'm just playing with it to understand how it works and how I can utilize it.

[kettanaito]

Can you please share how exactly your test fails? Include the actual output from your testing framework.

[rizametovd]

I'm trying to test this function:

  const openCustomerPortal = async () => {
    try {
      setIsLoading(true); // pass expect(button).toBeDisabled();

      await getCustomerPortalLink.mutateAsync(); // throws MSW error

    } catch {
      setIsLoading(false); //  pass expect(button).toBeEnabled()
    }
  };

Looks fine. Both assertions pass. But then I'd like to break a test (so some assertions failed)...to see the behavior of React Testing Library to understand it better.

  const openCustomerPortal = async () => {
    try {
      // ...same code and assertions
    } catch {
      setIsLoading(false); //  pass expect(button).toBeDisabled <-- changed assertion
    }
  };

Both assertions also pass.

How can it be possible? Same function with contradictive assertions in catch block .toBeEnabled & .toBeDisabled pass. My guess was that MSW error response happens too fast so RTL cant catch state updates.

[kettanaito]

You can always delay the mocked response or, even better, use an inverse assertion.

[rizametovd]

I think I understood why my test behaves this way. If I right then test enviroment doesn't wait till MSW service finishes the request but executes the test further.

Request is in pending state but test engine runs waitFor function and it runs it multiple times to get the "desired state" and when request is finished the button state is enabled so expect(button).toBeEnabled() passes.

When I change assertion to expect(button).toBeDisabled because I do want to get test fail the test engine runs waitFor only once because the button state is disabled right after user click and it passes.

As a workaround:

    let requestFinished = false;
    server.events.on('request:end', () => {
      requestFinished = true;
    });

    await waitFor(() => expect(requestFinished).toBe(true)); 

    // this waitFor should executed only after MSW request is finished
    await waitFor(() => {
      expect(button).toBeEnabled();
    });

Not sure if this okay or bad workaround.

[Yesufabrar]

Open