Decode path components in "req.params"

src/utils/matching/matchRequestUrl.test.ts

@@ -40,6 +40,18 @@ test('returns request parameters when matched', () => {
   })
 })
 
+test('decodes request parameters', () => {
+  const url = 'http://example.com:5001/example'
+  const match = matchRequestUrl(
+    new URL(`https://test.mswjs.io/reflect-url/${encodeURIComponent(url)}`),
+    'https://test.mswjs.io/reflect-url/:url',
+  )
+  expect(match).toHaveProperty('matches', true)
+  expect(match).toHaveProperty('params', {
+    url,
+  })
+})
+
 test('returns false when does not match against the request URL', () => {
   const match = matchRequestUrl(
     new URL('https://test.mswjs.io'),

src/utils/matching/matchRequestUrl.ts

@@ -42,7 +42,7 @@ export function matchRequestUrl(url: URL, path: Path, baseUrl?: string): Match {
       ? coercePath(normalizedPath)
       : normalizedPath
   const cleanUrl = getCleanUrl(url)
-  const result = match(cleanPath)(cleanUrl)
+  const result = match(cleanPath, { decode: decodeURIComponent })(cleanUrl)
   const params = (result && (result.params as PathParams)) || {}
 
   return {

test/rest-api/request/matching/path-params-decode.mocks.ts

@@ -0,0 +1,11 @@
+import { setupWorker, rest } from 'msw'
+
+const worker = setupWorker(
+  rest.get('https://test.mswjs.io/reflect-url/:url', (req, res, ctx) => {
+    const { url } = req.params
+
+    return res(ctx.json({ url }))
+  }),
+)
+
+worker.start()

test/rest-api/request/matching/path-params-decode.node.test.ts

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment node
+ */
+import fetch from 'node-fetch'
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer(
+  rest.get('https://test.mswjs.io/reflect-url/:url', (req, res, ctx) => {
+    const { url } = req.params
+
+    return res(ctx.json({ url }))
+  }),
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+test('decodes url componets', async () => {
+  const url = 'http://example.com:5001/example'
+
+  const res = await fetch(
+    `https://test.mswjs.io/reflect-url/${encodeURIComponent(url)}`,
+  )
+
+  expect(res.status).toEqual(200)
+  expect(await res.json()).toEqual({
+    url,
+  })
+})

test/rest-api/request/matching/path-params-decode.test.ts

@@ -0,0 +1,24 @@
+import * as path from 'path'
+import { pageWith } from 'page-with'
+
+function createRuntime() {
+  return pageWith({
+    example: path.resolve(__dirname, 'path-params-decode.mocks.ts'),
+  })
+}
+
+test('decodes url componets', async () => {
+  const runtime = await createRuntime()
+
+  const url = 'http://example.com:5001/example'
+
+  const res = await runtime.request(
+    `https://test.mswjs.io/reflect-url/${encodeURIComponent(url)}`,
+  )
+
+  expect(res.status()).toEqual(200)
+  expect(await res.allHeaders()).toHaveProperty('x-powered-by', 'msw')
+  expect(await res.json()).toEqual({
+    url,
+  })
+})