Possible to use Chrome dev tools to throttle network request?

[cmacdonnacha]

Hey there, I've tried throttling the network speed via Chrome dev tools but it doesn't seem to make any difference. Just wondering if this is supported when dealing with service workers? I know I could use ctx.delay(500) but I wouldn't want it to be permanent, only when trying to mimic slow connections. I also wouldn't like to use ctx.delay(500) as I'm guessing it would then slow tests down too.

Any ideas?

[kettanaito]

Hey, @cmacdonnacha.

As far as I know, there is no way to access the options set in the DevTools panel on runtime, so MSW cannot know what network throttling options you may have selected. It appears that setting network throttle doesn't affect requests handled by the worker.

If I'm not mistaken, @phryneas has been doing an interesting pattern where he enabled the groups of mocks based on the URL query parameter. You may utilize that to mimic network throttling when testing manually while keeping your automated tests intact.

I recommend creating a custom res() function and making it respect the ?delay=N query parameter set in the URL:

// src/mocks/throttledRes.js
import { createResponseComposition, compose, context } from 'msw'

export const throttledRes = createResponseComposition(null, [
  (res) => {
    const params = new URLSearchParams(location.search)
    const delay = parseInt(params.get('delay') || 0, 10)
    return compose(context.delay(delay)(res)
  })
])

Use it instead of the native res() in your request handlers:

// src/mocks/handlers.js
import { throttledRes } from './throttledRes'

rest.get('/user', (req, _, ctx) => {
  return throttledRes(ctx.json({ id: 'user-1 }))
})

You can learn more about Custom response composition in the documentation.

[cmacdonnacha]

That's quite clever actually. In my use case I do make API calls with query params after clicking a button, but I don't set them in the browser address bar url so I'd still end up having to add that delay in my code and later remember to remove it before git commiting. However, that's my issue so thanks for the solution. I could use something like local storage to do the same 👍