Discussion on: Testing a Generic Fetch Item List hook with Mock Service Worker

[Artem Zakharchenko]

Executing that in the browser console should apply the override. If it's not applied, double-check the correctness of the request path. When mocking on runtime, I find it much more comfortable to bind the handlers overrides to the URL query parameter.

1. Read the parameter in your mock setup.
2. Append certain handlers based on the parameter (can go as dynamic here as you wish: passing enums for handlers groups, or names of handler modules).

Since the handlers are loaded on runtime, refreshing that runtime will offload them forever. That's where URL-as-state is a more developer-friendly pattern but it takes some time to set up.

[Cathal Mac Donnacha 🚀]

Gotcha. The app I am currently looking at does not have react-router or anything similar implemented, so doesn't update the route or query string in the address bar url as the user clicks around. The app is also hosted on a different domain to the api. Therefore, what do you think about just reading the query string via the window location within the handler itself? Like this:

// Example url which developer would navigate to in the browser:
// http://localhost:3000/car-dashboard?error=true

rest.get(`/cars`, (req, res, ctx) => {
  const searchParams = new URLSearchParams(window.location.search);
  const isError = searchParams.get('error') === 'true';

  if (isError) {
    return res(ctx.status(500), ctx.json({error: 'Oops'}));
  }

   return res(ctx.status(200), ctx.json({results: mockCars}));
});

I'd probably use the same approach to simulate an empty state in the UI:

// Example url which developer would navigate to in the browser:
// http://localhost:3000/car-dashboard?error=false&empty=true

rest.get(`/cars`, (req, res, ctx) => {
  const searchParams = new URLSearchParams(window.location.search);
  const isError = searchParams.get('error') === 'true';
  const isEmpty = searchParams.get('empty') === 'true';

  if (isError) {
    return res(ctx.status(500), ctx.json({error: 'Oops'}));
  }

  if (isEmpty) {
    return res(ctx.status(200), ctx.json({results: []}));
  }

   return res(ctx.status(200), ctx.json({results: mockCars}));
});