Guidance on a dev flow that switches between mocked responses and real ones

Is your feature request related to a problem? Please describe. In my practice, I often switch my dev setup between hitting the real API (for correctness testing) and using the MockServiceWorker for its faster and easier to control response.

My current approach in a create-react-app project is this:

if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_MOCK_API === 1) {
    require('./__api_mocks__')
}

However, switching between mocked and non-mocked responses requires switching the ENV variable and restarting the webpack process.

Describe the solution you’d like Maybe an interface on localStorage could be exposed to control msw behavior. Possibly something like:

// disable
localStorage.msw = false

// enable
localStorage.msw = undefined | true

// mock only requests matching urls like "products/list" by providing a regex
localStorage.msw = /products\/list/

[VanTanev]

@kettanaito Using your code as a base, I added only a couple of small fixes (eg, worker.stop() doesn’t return a promise. Also, I wanted to have a way to specify default options).

Thanks a lot for your assistance! Hopefully, this is useful for other people too.

import { setupWorker } from 'msw'
import characterMocks from './character'

const worker = setupWorker(...characterMocks)

// necessary for history-based routing
const options = { serviceWorker: { url: '/mockServiceWorker.js' } }
weakStart(worker, options)

/////////////////////////////////

const FLAG = 'msw-suppressed'
type StartOptions = Parameters<typeof worker.start>[0]

export function weakStart(
    worker: ReturnType<typeof setupWorker>,
    defaultOptions: StartOptions = {},
): ReturnType<typeof worker.start> {
    const start = (options?: StartOptions): ReturnType<typeof worker.start> => {
        // Check the current mocking state in the localStorage
        const shouldSuppress = localStorage.getItem(FLAG)

        if (shouldSuppress) {
            return Promise.resolve(null)
        }

        return worker.start(options ?? defaultOptions)
    }

    // Make controller methods globally available to call during runtime.
    // Chain the localStorage update to preserve the state.
    const mocks = {
        start: (options?: StartOptions) =>
            start(options ?? defaultOptions).then(() =>
                localStorage.removeItem(FLAG),
            ),
        stop: () => {
            worker.stop()
            localStorage.setItem(FLAG, 'true')
        },
    }
    ;(window as any).mocks = mocks

    // Enable mocks by default
    return start(defaultOptions)
}

[kettanaito]

My pleasure! True, stop() at the moment doesn’t return a Promise. It used to unregister the worker, but now the worker unregisters itself when the last controlled client is closed. stop() now stops the mocking, removing the client’s id from the worker’s internal list of clients.

Glad it helped!