Fix handlers to be compatible with latest version of msw

Author: aryaemami59

packages/toolkit/src/query/tests/mocks/server.ts

@@ -1,62 +1,96 @@
 import { setupServer } from 'msw/node'
-import { rest } from 'msw'
-
-// This configures a request mocking server with the given request handlers.
+import { headersToObject } from 'headers-polyfill'
+import { HttpResponse, http } from 'msw'
 
 export type Post = {
-  id: number
+  id: string
   title: string
   body: string
 }
 
-export const posts: Record<number, Post> = {
-  1: { id: 1, title: 'hello', body: 'extra body!' },
+export const posts: Record<string, Post> = {
+  '1': { id: '1', title: 'hello', body: 'extra body!' },
 }
 
-export const server = setupServer(
-  rest.get('https://example.com/echo', (req, res, ctx) =>
-    res(ctx.json({ ...req, headers: req.headers.all() }))
-  ),
-  rest.post('https://example.com/echo', (req, res, ctx) =>
-    res(ctx.json({ ...req, headers: req.headers.all() }))
-  ),
-  rest.get('https://example.com/success', (_, res, ctx) =>
-    res(ctx.json({ value: 'success' }))
+export const handlers = [
+  http.get(
+    'https://example.com/echo',
+    async ({ request, params, cookies, requestId }) => {
+      return HttpResponse.json(
+        {
+          ...request,
+          params,
+          cookies,
+          requestId,
+          url: new URL(request.url),
+          headers: headersToObject(request.headers),
+        },
+        { headers: request.headers }
+      )
+    }
   ),
-  rest.post('https://example.com/success', (_, res, ctx) =>
-    res(ctx.json({ value: 'success' }))
+  http.post(
+    'https://example.com/echo',
+    async ({ request, cookies, params, requestId }) => {
+      const body = headersToObject(request.headers)['content-type'] === 'text/html'
+      ? await request.text()
+      : await request.json()
+
+      return HttpResponse.json(
+        {
+          ...request,
+          cookies,
+          params,
+          requestId,
+          body,
+          url: new URL(request.url),
+          headers: request?.headers
+            ? headersToObject(request.headers)
+            : request?.headers,
+        },
+        { headers: request.headers }
+      )
+    }
   ),
-  rest.get('https://example.com/empty', (_, res, ctx) => res(ctx.body(''))),
-  rest.get('https://example.com/error', (_, res, ctx) =>
-    res(ctx.status(500), ctx.json({ value: 'error' }))
+  http.get('https://example.com/success', () => {
+    return HttpResponse.json({ value: 'success' })
+  }),
+  http.post('https://example.com/success', ({ request }) => {
+    return HttpResponse.json({ value: 'success' })
+  }),
+  http.get('https://example.com/empty', () => new HttpResponse('')),
+  http.get('https://example.com/error', () =>
+    HttpResponse.json({ value: 'error' }, { status: 500 })
   ),
-  rest.post('https://example.com/error', (_, res, ctx) =>
-    res(ctx.status(500), ctx.json({ value: 'error' }))
+  http.post('https://example.com/error', () =>
+    HttpResponse.json({ value: 'error' }, { status: 500 })
   ),
-  rest.get('https://example.com/nonstandard-error', (_, res, ctx) =>
-    res(
-      ctx.status(200),
-      ctx.json({
+  http.get('https://example.com/nonstandard-error', () =>
+    HttpResponse.json(
+      {
         success: false,
         message: 'This returns a 200 but is really an error',
-      })
+      },
+      { status: 200 }
     )
   ),
-  rest.get('https://example.com/mirror', (req, res, ctx) =>
-    res(ctx.json(req.params))
+  http.get('https://example.com/mirror', ({ params }) =>
+    HttpResponse.json(params)
   ),
-  rest.post('https://example.com/mirror', (req, res, ctx) =>
-    res(ctx.json(req.params))
+  http.post('https://example.com/mirror', ({ params }) =>
+    HttpResponse.json(params)
   ),
-  rest.get('https://example.com/posts/random', (req, res, ctx) => {
+  http.get('https://example.com/posts/random', () => {
     // just simulate an api that returned a random ID
-    const { id, ..._post } = posts[1]
-    return res(ctx.json({ id }))
+    const { id } = posts[1]
+    return HttpResponse.json({ id })
   }),
-  rest.get<Post, any, { id: number }>(
+  http.get<Post, any, Pick<Post, 'id'>>(
     'https://example.com/post/:id',
-    (req, res, ctx) => {
-      return res(ctx.json(posts[req.params.id]))
-    }
-  )
-)
+    ({ params }) => HttpResponse.json(posts[params.id])
+  ),
+]
+
+
+// This configures a request mocking server with the given request handlers.
+export const server = setupServer(...handlers)