Allow override same endpoint on setup

[SevenOutman]

Hi folks, msw is wonderful and I enjoy using it in my daily development.

Here's one thing that I think it would make things simpler for this unit-testing use case:

Say I have several endpoints that needs to be mocked for every test case, e.g. the GET /api/current-user api, so I create this setupServer function and declare those apis in it so that I don't have to repeatedly declare them every time I create a server instance.

// test-utils.js
import { rest } from 'msw';
import { setupServer as mswSetupServer } from 'msw/node';

export function setupServer(...args) {
  return setupServer(
    rest.get('/api/current-user', (req, res, { json }) => res(json({}))),
    ...args
  )
}
export { rest };

The only problem is that when I need a different response result for a test suite (not for a single test case), I can't override the previously defined endpoint right on setup

import { setupServer, rest } from '../test-utils';

const server = setupServer(
  rest.get('/api/current-user', (req, res, { json }) => res(json({ id: 100 }))) // This dosen't work
)

In other words, if there're multiple same endpoints in setupServer, the latter ones seems to not override prior ones.

const server = setupServer(
  rest.get('/api/current-user', (req, res, { json }) => res(json({ id: 1 }))), // This works
  rest.get('/api/current-user', (req, res, { json }) => res(json({ id: 100 }))) // This won't work
)

What I have to do now is to manually use server.use to register the endpoint in beforeEach phase, but that loses the point in making the setupServer function in the first place.

const server = setupServer();

beforeEach(() => {
  server.use(
    rest.get('/api/current-user', (req, res, { json }) => res(json({ id: 100 }))) // 🫤
  )
});

Any thoughts?

[kettanaito]

Hey, @SevenOutman. Thanks for raising this.

I think your abstracting things a little but too high the chain. Instead of wrapping the entire setupServer call, abstract the handlers.

export const defaultUserHandlers = [
  rest.get('/api/current-user', resolver),
  // ...as many as you need to describe a happy path.
]

Then, in tests just provide this handlers list to the setupServer call:

import { setupServer } from 'msw/node'
import { defaultUserHandlers } from './handlers/user'

const server = setupServer(...defaultUserHandlers)

This should cover the repetition for the test cases that rely on the happy path handlers defined in defaultUserHandlers.

Now, when it comes to overrides, you can provision them in any supported way in MSW:

• Request handlers overrides on setupServer;
• Runtime request handlers via server.use()

For example, if your entire test suite needs a differ user behavior, choose the first option:

import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { defaultUserHandlers } from './handlers/user'

const server = setupServer(
  // Note: MSW applies handlers left-to-right
  // so you have to put first the handlers you wish
  // to take precedence (your overrides).
  rest.get('/api/current-user', resolveDifferentlyForThisTest),
  ...defaultUserHandlers,
)

You can abstract the overrides into their own handlers list as well!

My main suggestion here is to abstract at the array of handlers level because you can leverage the standard Array API to extend your abstraction vs having to design this extension by yourself if you choose functions.

[kettanaito]

I seem to have overlooked a very important detail: the order in which handlers are applied. It's left-to-right so the handlers you wish to take precedence must go to the left not right:

setupServer(
  rest.get('/api/current-user', resolveDifferentlyForThisTest),
  rest.get('/api/current-user', resolver),
)

Now the override (the first handler) will apply.

I will edit the original answer above to reflect this. Thanks for spotting this!

[SevenOutman]

I seem to have overlooked a very important detail: the order in which handlers are applied. It's left-to-right so the handlers you wish to take precedence must go to the left not right:

setupServer(
  rest.get('/api/current-user', resolveDifferentlyForThisTest),
  rest.get('/api/current-user', resolver),
)

Now the override (the first handler) will apply.

I see. This might work but the overriding precedence doesn't look so straight-forward to me. It feels opposite to what javascript users are familiar with, e.g. object rest spreading, Map setting. Is there some reason why msw prefers not to let latter defined resolvers take precedence?

[kettanaito]

It's perhaps because we subconsciously confuse array and object spreading. Yet "rest" arguments are always arrays, and precedence in arrays is defined from left to right (hence arr.unshift()).

Is there some reason why msw prefers not to let latter defined resolvers take precedence?

Because it accepts an arbitrary number of handlers in an argument rest pattern:

function setupServer(...handlers) {}

It's natural to iterate over arrays from left to right (.map(), .forEach(), .filter(), .find() as opposed to .reduceRight() that goes right-to-left), and that's how it iterates over it to find the first matching handler. I understand this may be confusing at first but I encourage you to put things that should take precedence first (hey, it even sounds natural!).

[SevenOutman]

I guess the minimum changes I have to make is to put those global mocks after overriding ones then. :)

  export function setupServer(...args) {
    return setupServer(
+     ...args,
      rest.get('/api/current-user', (req, res, { json }) => res(json({}))),
-     ...args
    )
  }

Thanks!

[kettanaito]

Yes, that's correct.