What is the best way to mock bypassed fetch in handlers?

[misha-erm]

Hello 👋🏻

I do some clean-up logic to not-mocked endpoint in my handler and that causes some troubles for me in tests.
It is the desired behaviour for local development but in my tests, my environment isn't complete and microservices with those endpoints are not started.

What is the best way to avoid hitting dead service in my test?
Currently, I just ignore network errors to other services but I think there should be better way.

example:

rest.delete("/api/blocks/:id", async (req, res, ctx) => {
    const block = blocksMap.get(req.params.id);

    if (block.kind === "view") {
      await api.deleteEntities([{id: block.content.id}]);
         // ❗ catch to avoid failed test
         .catch((err) => console.warn("[handlers]: Can't delete entity", err));
    }
    if (block.kind === "rich-text") {
      await api.deleteDocuments([{id: block.content.id}])
         // ❗ catch to avoid failed test
        .catch((err) => console.warn("[handlers]: Can't delete document", err));
    }

    blocksMap.delete(req.params.id);
    return res(ctx.json({success: true}));
  }),

Overriding delete endpoint in each test could be an option but then I need to give tests access to edit mocked db blocksMap

[kettanaito]

Hey, @MikeYermolayev.

I recommend not performing any bypassed requests during your tests. There's no reason to: the entire purpose of API mocking is to scope your testing surface to the code/logic you wish to test. Performing an actual request subjects your test runs to all sorts of brittle network behaviors and results in unreliable tests.

The library comes with a built-in way to prevent such bypassed requests from happening during test runs:

server.listen({ onUnhandledRequest: 'error' })

With this option set, whenever there's a request you don't wish to handle, it will throw an exception, halting your test. This is the behavior I'd recommend.

If you wish to mock certain endpoints that don't have any implementation, you can respond with a 501 status code (to stay semantically correct), or a dummy 200 (but this will have implications, though).

Feel free to clarify what's your expected behavior here in the case I didn't understand it.

[misha-erm]

I understand but currently I use mswjs for prototyping mostly. We have a complex microservice system and we hadn't used mswjs before so there are mocks only for one feature at the moment. That's why throwing errors on unhandled request isn't an option for me

[kettanaito]

Understood. Please, could you then describe what you want to achieve in more detail? I'm afraid I don't understand your goal at the moment. Feel free to add pseudo-code and handlers examples so it's easier to grasp the expected setup.

[misha-erm]

I solved a problem while I was describing it to you))

So I need to do a clean up logic in mock handler in dev environment since my prototype feature has side effect in other not mocked services but I do not need to do it in ui test environment since there is no backend.

And to achieve that I can make use of NODE_ENV and that's it. I'll just skip calls to real services in test environment.

Thanks for being my Rubber Duck 😄