Use codemods provided by msw to modernize msw syntax

Author: aryaemami59

packages/toolkit/src/query/tests/buildCreateApi.test.tsx

@@ -1,3 +1,10 @@
+import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
+import {
+  buildCreateApi,
+  coreModule,
+  reactHooksModule,
+} from '@reduxjs/toolkit/query/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import type { ReactReduxContextValue } from 'react-redux'
 import {
@@ -6,42 +13,7 @@ import {
   createStoreHook,
   Provider,
 } from 'react-redux'
-import {
-  buildCreateApi,
-  coreModule,
-  reactHooksModule,
-} from '@reduxjs/toolkit/query/react'
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  renderHook,
-} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { rest } from 'msw'
-import {
-  actionsReducer,
-  ANY,
-  expectExactType,
-  expectType,
-  setupApiStore,
-  withProvider,
-  useRenderCounter,
-  waitMs,
-} from './helpers'
-import { server } from './mocks/server'
-import type { UnknownAction } from 'redux'
-import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState'
-import type { SerializedError } from '@reduxjs/toolkit'
-import {
-  createListenerMiddleware,
-  configureStore,
-  lruMemoize,
-  createSelectorCreator,
-} from '@reduxjs/toolkit'
-import { delay } from '../../utils'
+import { setupApiStore, useRenderCounter, waitMs } from './helpers'
 
 const MyContext = React.createContext<ReactReduxContextValue>(null as any)
 

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -20,10 +20,9 @@ import {
   renderHook,
 } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 import {
   actionsReducer,
-  ANY,
   expectExactType,
   expectType,
   setupApiStore,
@@ -104,7 +103,7 @@ const api = createApi({
       query: (update) => ({ body: update }),
     }),
     getError: build.query({
-      query: (query) => '/error',
+      query: () => '/error',
     }),
     listItems: build.query<Item[], { pageNumber: number }>({
       serializeQueryArgs: ({ endpointName }) => {
@@ -119,7 +118,7 @@ const api = createApi({
       merge: (currentCache, newItems) => {
         currentCache.push(...newItems)
       },
-      forceRefetch: ({ currentArg, previousArg }) => {
+      forceRefetch: () => {
         return true
       },
     }),
@@ -757,7 +756,7 @@ describe('hooks tests', () => {
       }
 
       // 1) Initial state: an active subscription
-      const { result, rerender, unmount } = renderHook(
+      const { rerender, unmount } = renderHook(
         ([arg, options]: Parameters<
           typeof pokemonApi.useGetPokemonByNameQuery
         >) => pokemonApi.useGetPokemonByNameQuery(arg, options),
@@ -1752,14 +1751,14 @@ describe('hooks tests', () => {
     test('initially failed useQueries that provide an tag will refetch after a mutation invalidates it', async () => {
       const checkSessionData = { name: 'matt' }
       server.use(
-        rest.get('https://example.com/me', (req, res, ctx) => {
-          return res.once(ctx.status(500))
+        http.get('https://example.com/me', () => {
+            return HttpResponse.json(null, { status: 500 })
+        }, { once: true }),
+        http.get('https://example.com/me', () => {
+            return HttpResponse.json(checkSessionData)
         }),
-        rest.get('https://example.com/me', (req, res, ctx) => {
-          return res(ctx.json(checkSessionData))
-        }),
-        rest.post('https://example.com/login', (req, res, ctx) => {
-          return res(ctx.status(200))
+        http.post('https://example.com/login', () => {
+            return HttpResponse.json(null, { status: 200 })
         })
       )
       let data, isLoading, isError
@@ -1977,47 +1976,49 @@ describe('hooks with createApi defaults set', () => {
       posts = [...initialPosts]
 
       const handlers = [
-        rest.get('https://example.com/posts', (req, res, ctx) => {
-          return res(ctx.json(posts))
+        http.get('https://example.com/posts', () => {
+            return HttpResponse.json(posts)
         }),
-        rest.put<Partial<Post>>(
+        http.put<Post, Partial<Post>>(
           'https://example.com/post/:id',
-          (req, res, ctx) => {
-            const id = Number(req.params.id)
+          async ({ request, params }) => {
+              const body = await request.json();
+            const id = Number(params.id)
             const idx = posts.findIndex((post) => post.id === id)
 
             const newPosts = posts.map((post, index) =>
               index !== idx
                 ? post
                 : {
-                    ...req.body,
+                    ...body,
                     id,
-                    name: req.body.name || post.name,
+                    name: body?.name || post.name,
                     fetched_at: new Date().toUTCString(),
                   }
             )
             posts = [...newPosts]
 
-            return res(ctx.json(posts))
+              return HttpResponse.json(posts)
           }
         ),
-        rest.post('https://example.com/post', (req, res, ctx) => {
-          let post = req.body as Omit<Post, 'id'>
+        http.post<any, Omit<Post, 'id'>>('https://example.com/post', async ({ request }) => {
+            const body = await request.json();
+          let post = body
           startingId += 1
           posts.concat({
             ...post,
             fetched_at: new Date().toISOString(),
             id: startingId,
           })
-          return res(ctx.json(posts))
+            return HttpResponse.json(posts)
         }),
       ]
 
       server.use(...handlers)
     })
 
     interface Post {
-      id: number
+      id: string
       name: string
       fetched_at: string
     }
@@ -2091,7 +2092,7 @@ describe('hooks with createApi defaults set', () => {
       function SelectedPost() {
         const { post } = api.endpoints.getPosts.useQueryState(undefined, {
           selectFromResult: ({ data }) => ({
-            post: data?.find((post) => post.id === 1),
+            post: data?.find((post) => post.id === 1 as any),
           }),
         })
         getRenderCount = useRenderCounter()
@@ -2170,7 +2171,7 @@ describe('hooks with createApi defaults set', () => {
             isSuccess,
             isError,
           }) => ({
-            post: data?.find((post) => post.id === 1),
+            post: data?.find((post) => post.id === 1 as any),
             isUninitialized,
             isLoading,
             isFetching,
@@ -2227,7 +2228,7 @@ describe('hooks with createApi defaults set', () => {
         getRenderCount = useRenderCounter()
         const { post } = api.endpoints.getPosts.useQuery(undefined, {
           selectFromResult: ({ data }) => ({
-            post: data?.find((post) => post.id === 1),
+            post: data?.find((post) => post.id === 1 as any),
           }),
         })
 
@@ -2276,7 +2277,7 @@ describe('hooks with createApi defaults set', () => {
             </button>
             <button
               data-testid="updatePost"
-              onClick={() => updatePost({ id: 1, name: 'supercoooll!' })}
+              onClick={() => updatePost({ id: 1, name: 'supercoooll!' } as any)}
             >
               Update post
             </button>
@@ -2287,7 +2288,7 @@ describe('hooks with createApi defaults set', () => {
       function SelectedPost() {
         const { post } = api.endpoints.getPosts.useQuery(undefined, {
           selectFromResult: ({ data }) => ({
-            post: data?.find((post) => post.id === 1),
+            post: data?.find((post) => post.id === 1 as any),
           }),
         })
         getRenderCount = useRenderCounter()
@@ -2377,11 +2378,6 @@ describe('hooks with createApi defaults set', () => {
 
     test('useQuery with selectFromResult option has a type error if the result is not an object', async () => {
       function SelectedPost() {
-        const _res1 = api.endpoints.getPosts.useQuery(undefined, {
-          // selectFromResult must always return an object
-          // @ts-expect-error
-          selectFromResult: ({ data }) => data?.length ?? 0,
-        })
 
         const res2 = api.endpoints.getPosts.useQuery(undefined, {
           // selectFromResult must always return an object

packages/toolkit/src/query/tests/createApi.test.ts

@@ -1,35 +1,35 @@
 import type { SerializedError } from '@reduxjs/toolkit'
 import { configureStore, createAction, createReducer } from '@reduxjs/toolkit'
-import type { SpyInstance } from 'vitest'
-import { vi } from 'vitest'
+import type {
+  FetchBaseQueryError,
+  FetchBaseQueryMeta,
+} from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
 import type {
   Api,
   MutationDefinition,
   QueryDefinition,
 } from '@reduxjs/toolkit/query'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-import type {
-  FetchBaseQueryError,
-  FetchBaseQueryMeta,
-} from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
+import type { SpyInstance } from 'vitest'
+import { vi } from 'vitest'
 
+import type {
+  DefinitionsFromApi,
+  OverrideResultType,
+  TagTypesFromApi,
+} from '@reduxjs/toolkit/dist/query/endpointDefinitions'
+import { HttpResponse, http } from 'msw'
+import nodeFetch from 'node-fetch'
+import type { SerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import {
   ANY,
-  expectType,
   expectExactType,
+  expectType,
+  getSerializedHeaders,
   setupApiStore,
   waitMs,
-  getSerializedHeaders,
 } from './helpers'
 import { server } from './mocks/server'
-import { rest } from 'msw'
-import type { SerializeQueryArgs } from '../defaultSerializeQueryArgs'
-import { string } from 'yargs'
-import type {
-  DefinitionsFromApi,
-  OverrideResultType,
-  TagTypesFromApi,
-} from '@reduxjs/toolkit/dist/query/endpointDefinitions'
 
 const originalEnv = process.env.NODE_ENV
 beforeAll(() => void ((process.env as any).NODE_ENV = 'development'))
@@ -651,11 +651,12 @@ describe('additional transformResponse behaviors', () => {
       query: build.query<SuccessResponse & EchoResponseData, void>({
         query: () => '/success',
         transformResponse: async (response: SuccessResponse) => {
-          const res = await fetch('https://example.com/echo', {
+          const res: any = await nodeFetch('https://example.com/echo', {
             method: 'POST',
             body: JSON.stringify({ banana: 'bread' }),
           }).then((res) => res.json())
-          const additionalData = JSON.parse(res.body) as EchoResponseData
+
+          const additionalData = res.body as EchoResponseData
           return { ...response, ...additionalData }
         },
       }),
@@ -680,6 +681,7 @@ describe('additional transformResponse behaviors', () => {
 
   test('transformResponse handles an async transformation and returns the merged data (query)', async () => {
     const result = await storeRef.store.dispatch(api.endpoints.query.initiate())
+    console.log(result)
 
     expect(result.data).toEqual({ value: 'success', banana: 'bread' })
   })
@@ -716,7 +718,7 @@ describe('additional transformResponse behaviors', () => {
         response: {
           headers: {
             'content-type': 'application/json',
-            'x-powered-by': 'msw',
+            // 'x-powered-by': 'msw',
           },
         },
       },
@@ -737,7 +739,7 @@ describe('additional transformResponse behaviors', () => {
         response: {
           headers: {
             'content-type': 'application/json',
-            'x-powered-by': 'msw',
+            // 'x-powered-by': 'msw',
           },
         },
       },
@@ -795,8 +797,10 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
   test('query lifecycle events fire properly', async () => {
     // We intentionally fail the first request so we can test all lifecycles
     server.use(
-      rest.get('https://example.com/success', (_, res, ctx) =>
-        res.once(ctx.status(500), ctx.json({ value: 'failed' }))
+      http.get(
+        'https://example.com/success',
+        () => HttpResponse.json({ value: 'failed' }, { status: 500 }),
+        { once: true }
       )
     )
 
@@ -819,8 +823,10 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
   test('mutation lifecycle events fire properly', async () => {
     // We intentionally fail the first request so we can test all lifecycles
     server.use(
-      rest.post('https://example.com/success', (_, res, ctx) =>
-        res.once(ctx.status(500), ctx.json({ value: 'failed' }))
+      http.post(
+        'https://example.com/success',
+        () => HttpResponse.json({ value: 'failed' }, { status: 500 }),
+        { once: true }
       )
     )
 
@@ -944,7 +950,7 @@ describe('custom serializeQueryArgs per endpoint', () => {
   }
 
   const dummyClient: MyApiClient = {
-    async fetchPost(id) {
+    async fetchPost() {
       return { value: 'success' }
     },
   }
@@ -1105,12 +1111,13 @@ describe('custom serializeQueryArgs per endpoint', () => {
     const PAGE_SIZE = 3
 
     server.use(
-      rest.get('https://example.com/listItems', (req, res, ctx) => {
-        const pageString = req.url.searchParams.get('page')
+      http.get('https://example.com/listItems', ({ request }) => {
+        const url = new URL(request.url)
+        const pageString = url.searchParams.get('page')
         const pageNum = parseInt(pageString || '0')
 
         const results = paginate(allItems, PAGE_SIZE, pageNum)
-        return res(ctx.json(results))
+        return HttpResponse.json(results)
       })
     )
 
@@ -1133,12 +1140,13 @@ describe('custom serializeQueryArgs per endpoint', () => {
     const PAGE_SIZE = 3
 
     server.use(
-      rest.get('https://example.com/listItems2', (req, res, ctx) => {
-        const pageString = req.url.searchParams.get('page')
+      http.get('https://example.com/listItems2', ({ request }) => {
+        const url = new URL(request.url)
+        const pageString = url.searchParams.get('page')
         const pageNum = parseInt(pageString || '0')
 
         const results = paginate(allItems, PAGE_SIZE, pageNum)
-        return res(ctx.json(results))
+        return HttpResponse.json(results)
       })
     )