Merge branch 'master' of https://github.com/reduxjs/redux-toolkit into fix-type-tests-setup

Author: aryaemami59

.github/workflows/tests.yml

@@ -91,7 +91,7 @@ jobs:
       - name: Install build artifact
         run: yarn workspace @reduxjs/toolkit add $(pwd)/package.tgz
 
-      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.ts ./src/tests/*.* ./src/query/tests/*.*
+      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.mts ./src/tests/*.* ./src/query/tests/*.*
 
       - name: Run tests, against dist
         run: yarn test
@@ -133,7 +133,7 @@ jobs:
       - name: Show installed RTK versions
         run: yarn info @reduxjs/toolkit
 
-      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.ts ./src/tests/*.* ./src/query/tests/*.*
+      - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.mts ./src/tests/*.* ./src/query/tests/*.*
 
       - name: Test types
         run: |

.yarn/patches/msw-npm-0.40.2-2107d48752

@@ -80,8 +80,8 @@
     "invariant": "^2.2.4",
     "jsdom": "^21.0.0",
     "json-stringify-safe": "^5.0.1",
-    "msw": "^0.40.2",
-    "node-fetch": "^2.6.1",
+    "msw": "^2.1.4",
+    "node-fetch": "^3.3.2",
     "prettier": "^2.2.1",
     "query-string": "^7.0.1",
     "rimraf": "^3.0.2",

packages/toolkit/package.json

@@ -1,13 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { ApiProvider, createApi } from '@reduxjs/toolkit/query/react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { delay } from 'msw'
 import * as React from 'react'
 import { Provider } from 'react-redux'
-import { waitMs } from '../../tests/utils/helpers'
 
 const api = createApi({
   baseQuery: async (arg: any) => {
-    await waitMs(150)
+    await delay(150)
     return { data: arg?.body ? arg.body : null }
   },
   endpoints: (build) => ({

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

@@ -5,6 +5,7 @@ import {
   reactHooksModule,
 } from '@reduxjs/toolkit/query/react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { delay } from 'msw'
 import * as React from 'react'
 import type { ReactReduxContextValue } from 'react-redux'
 import {

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

@@ -22,11 +22,10 @@ import {
   renderHook,
   screen,
   waitFor,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { rest } from 'msw';
-import React from "react";
-import type { MockInstance } from "vitest";
+  renderHook,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { http, HttpResponse } from 'msw'
 import {
   actionsReducer,
   setupApiStore,
@@ -103,7 +102,7 @@ const api = createApi({
       query: (update) => ({ body: update }),
     }),
     getError: build.query({
-      query: (query) => '/error',
+      query: () => '/error',
     }),
     listItems: build.query<Item[], { pageNumber: number }>({
       serializeQueryArgs: ({ endpointName }) => {
@@ -118,7 +117,7 @@ const api = createApi({
       merge: (currentCache, newItems) => {
         currentCache.push(...newItems)
       },
-      forceRefetch: ({ currentArg, previousArg }) => {
+      forceRefetch: () => {
         return true
       },
     }),
@@ -756,7 +755,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),
@@ -1751,14 +1750,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))
-        }),
-        rest.get('https://example.com/me', (req, res, ctx) => {
-          return res(ctx.json(checkSessionData))
+        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.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
@@ -1976,39 +1975,41 @@ 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<{ id: string }, 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)
         }),
       ]
 
@@ -2378,11 +2379,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/buildHooks.test.tsx

@@ -1,6 +1,6 @@
 import { createApi } from '@reduxjs/toolkit/query'
 import { actionsReducer, setupApiStore } from '../../tests/utils/helpers'
-import { delay } from '../../utils'
+import { delay } from 'msw'
 
 const baseQuery = (args?: any) => ({ data: args })
 const api = createApi({

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

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { createApi } from '@reduxjs/toolkit/query'
+import { delay } from 'msw'
 import { setupApiStore } from '../../tests/utils/helpers'
-import { delay } from '../../utils'
 
 let shouldApiResponseSuccess = true
 

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

@@ -12,21 +12,14 @@ import type {
 } from '@reduxjs/toolkit/query'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
 import type { MockInstance } from 'vitest'
-import { vi } from 'vitest'
-
-import { rest } from 'msw'
-import {
-  ANY,
-  getSerializedHeaders,
-  setupApiStore,
-  waitMs,
-} from '../../tests/utils/helpers'
-import { expectExactType, expectType } from '../../tests/utils/typeTestHelpers'
+
 import type {
   DefinitionsFromApi,
   OverrideResultType,
   TagTypesFromApi,
 } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
+import { HttpResponse, delay, http } from 'msw'
+import nodeFetch from 'node-fetch'
 import { server } from './mocks/server'
 
 beforeAll(() => {
@@ -186,7 +179,7 @@ describe('wrong tagTypes log errors', () => {
     store.dispatch(api.endpoints[endpoint].initiate())
     let result: { status: string }
     do {
-      await waitMs(5)
+      await delay(5)
       // @ts-ignore
       result = api.endpoints[endpoint].select()(store.getState())
     } while (result.status === 'pending')
@@ -461,11 +454,11 @@ describe('endpoint definition typings', () => {
       })
 
       storeRef.store.dispatch(api.endpoints.query1.initiate('in1'))
-      await waitMs(1)
+      await delay(1)
       expect(spy).not.toHaveBeenCalled()
 
       storeRef.store.dispatch(api.endpoints.query2.initiate('in2'))
-      await waitMs(1)
+      await delay(1)
       expect(spy).toHaveBeenCalledWith(
         "Tag type 'missing' was used, but not specified in `tagTypes`!"
       )
@@ -652,11 +645,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 }
         },
       }),
@@ -717,7 +711,6 @@ describe('additional transformResponse behaviors', () => {
         response: {
           headers: {
             'content-type': 'application/json',
-            'x-powered-by': 'msw',
           },
         },
       },
@@ -738,7 +731,6 @@ describe('additional transformResponse behaviors', () => {
         response: {
           headers: {
             'content-type': 'application/json',
-            'x-powered-by': 'msw',
           },
         },
       },
@@ -796,32 +788,36 @@ 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 }
       )
     )
 
     expect(storeRef.store.getState().testReducer.count).toBe(null)
     const failAttempt = storeRef.store.dispatch(api.endpoints.query.initiate())
     expect(storeRef.store.getState().testReducer.count).toBe(0)
     await failAttempt
-    await waitMs(10)
+    await delay(10)
     expect(storeRef.store.getState().testReducer.count).toBe(-1)
 
     const successAttempt = storeRef.store.dispatch(
       api.endpoints.query.initiate()
     )
     expect(storeRef.store.getState().testReducer.count).toBe(0)
     await successAttempt
-    await waitMs(10)
+    await delay(10)
     expect(storeRef.store.getState().testReducer.count).toBe(1)
   })
 
   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 }
       )
     )
 
@@ -945,7 +941,7 @@ describe('custom serializeQueryArgs per endpoint', () => {
   }
 
   const dummyClient: MyApiClient = {
-    async fetchPost(id) {
+    async fetchPost() {
       return { value: 'success' }
     },
   }
@@ -1106,12 +1102,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)
       })
     )
 
@@ -1134,12 +1131,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)
       })
     )