Override handlers at runtime between different clients

[almeida1492]

I'm trying to implement a graphic interface to control the worker during a demo or integration test session. This interface would be attached to the app in the staging bundle and deployed on the environment where we test the system integration. The idea was to be able to turn on/off the interception or edit the mocked responses at runtime. By doing so, it would be possible to move on even if something in the back end is broken, saving us precious time.

The interface to control the worker would be served in a specific route (something like /mocker) that would be opened in a second tab different from the one with the app itself. Currently, the worker behaves in a per-client fashion, so if I have two tabs opened and I call .use() in one of them, the change doesn't affect the other. Is it possible to change this behavior?

[kettanaito]

Hey, @almeida1492.

Currently, the worker behaves in a per-client fashion, so if I have two tabs opened and I call .use() in one of them, the change doesn't affect the other. Is it possible to change this behavior?

Yes, you need to lift the mocks state higher to achieve this. One common way to do that is to make the handlers dependent on the URL search parameters.

// src/mocks/handlers.js
const params = new URLSearchParams(location.search)
const scenarioName = params.get('scenario')

const scenarios = {
  success: [rest.get(...), rest.post(...)],
  error: [rest.get(...)]
}

export const handlers = scenarioName ? scenarios[scenarioName] : scenarios.success

Then, you can get the same mock behavior between different tabs.

That won't support something like .use() to sync the handlers across tabs though. Each tab is its own runtime that calls setupWorker() and creates its own isolated instance. We'd have to have an explicit cross-tabs sync logic to enable what you're talking about but even then it'd be problematic. I don't think this feature aligns with what MSW does.

[almeida1492]

Got you. Thanks for the answer.

[kettanaito]

Alternatively, you can resolve response data from elsewhere on runtime (e.g. a JSON file that you also bundle). That way you can utilize HMR of your bundler and MSW will just receive the updated value of that JSON, deriving mocked responses from it.