Some differences to be aware of when swapping from pretender to msw

[Techn1x]

Just wanted to post about some differences I encountered when applying mirage-msw to my codebases. These don't necessarily need fixing or anything, I figured it might just be helpful to others who might be having issues and not sure why, or want to be aware of potential issues before diving in.

1) always lowercased requestHeaders in the handler

• detailed here -> different requestHeaders between pretender / msw #21

2) request.params['*'] w/ wildcarded urls doesn't work

• For whatever reason, I had a few handlers like this (not great)

server.post('/my-url/**/some-endpoint', function () {
  const schoolId = request.params['*']
})

• change it to this and it'll be fine

server.post('/my-url/:school_id/some-endpoint', function () {
  const schoolId = request.params.school_id
})

3) dasherized dynamic segments in url path do not work -> do them underscored instead.

-server.post('/a-path-to/:my-school-id/some-endpoint', function () { ... })
+server.post('/a-path-to/:my_school_id/some-endpoint', function () { ... })

4) cannot provide URL to handler definition, must provide as string (eg by calling .href)

-const url = new URL('http://www.example.com')
+const url = new URL('http://www.example.com').href
server.post(url, function () { ... })

5) double slashes in URL string aren't corrected for

• I had a few poorly defined endpoints that were badly joined. pretender seemed to not care about this, MSW does (as it should).

-server.post('/a-path-to/some-resource//some-endpoint', function () { ... })
+server.post('/a-path-to/some-resource/some-endpoint', function () { ... })

6) more passthroughs needed

• I had to add a few more passthroughs for things that wouldn't have been caught by pretenders' mocking of fetch, but are caught by MSW's more thorough worker approach - this typically means things that are requested by the browser without the use of window.fetch. For example, if your index.html file contains a line like this for fonts
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  you might need a passthrough for it
  server.passthrough('https://fonts.gstatic.com/**')

[Techn1x]

I'm still working through some codebases so I might find other things, will post about them as I go.

If you find any differences I didn't detail, feel free to post them too.

[Techn1x]

7) mirage handler creation no longer returns anything

I had a few cases like this, that made use of numberOfCalls

const mirageHandler = server.patch(url, () => ...)
...
// TypeError: Cannot read properties of undefined (reading 'numberOfCalls')
assert.strictEqual(mirageHandler.numberOfCalls, 1)

Alternatives;

const responseStub = sinon.stub().returns(new Response(200))
server.patch(url, responseStub)
...
assert.strictEqual(responseStub.callCount, 1)

or without sinon

server.patch(url, function () => {
  assert.step('PATCH_CALLED')
  return new Response(200)
})
...
assert.verifySteps(['PATCH_CALLED'])