Asserting that a request has not been made

[EduardoSimon]

Hi,

We are developing a react library in which a hook is exposed. As part of the testing strategy, we need to make sure that a fetch request is not performed when a parameter is provided in the hook, something like:

    if(param) {
      await fetch() // fetches /foo/bar
    }

I would like to implement something like:

  describe('when param is not provided', () => {
    test('skip the request', async () => {
      const { result } = renderHook(() => useTestHook());

      await act(async () => {
        await result.current.asyncHookOperation({ foo: "bar" });
      });

      expectRequestNotHaveBeenMade('POST', '/foo/bar')
    });
  });

Is it possible to approach the issue like I am trying to? I was having a look at the lifecycle events but I can't wrap my head around a possible solution.

Regards,
Edu

[kettanaito]

Hi, @EduardoSimon. Thanks for raising this.

Currently, MSW does not provide any native APIs to perform request assertions. In general, request assertions are discouraged as they often indicate implementation detail testing. That includes your use case as well but in the library publishing world testing implementation details is oftentimes unavoidable.

First things first, this isn't really an MSW issue/feature to cover. Still, let's talk about a test like this one.

In a nutshell, it will consist of two parts:

1. An assertion that a request didn't happen.
2. A sensible timeout window before making that assertion.

Such negative network assertions are always tricky because the test itself has a limited timeframe while a request may still happen at testTimeElapsed + 1. The best we can do is assume that conditional logic is fast and set a realistic timeout within which the request could have happened.

You can achieve a test like that by attaching a runtime handler to the resource you don't wish to request, giving a mock function as its resolver, then running your hook, awaiting that timeout window, and asserting that the resolver function hasn't been called.

test('skips the request if no "param" was provided', async () => {
  const responseResolver = jest.fn()
  server.use(
    rest.get('/resource', responseResolver)
  )

  const { result } = renderHook(() => useTestHook())
  // act and do actions

  await delay(2000)

  expect(responseResolver).not.toHaveBeenCalled()
})

[EduardoSimon]

Thank you so much for the quick response. I did not think about modifying the handler by using a jest mock.

Its true that its a bit tricky to test. I would probably decrease the timeout as in my test suite a request takes in the order of ms, so probably with 20 or 30 ms should be enough, but it could create a flaky test for less powerful dev machines.

Another option was to set msw aside for this test and just use fetchMock, what do you think?

[kettanaito]

Swapping MSW for something else for this test would have the same effect on your code as doing it anywhere else. You'll bring even more implementation details to your test, like the fact that your code relies on fetch.