Use the delay function recommended by MSW

Author: aryaemami59

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

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

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

@@ -5,15 +5,16 @@ 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 {
+  Provider,
   createDispatchHook,
   createSelectorHook,
   createStoreHook,
-  Provider,
 } from 'react-redux'
-import { setupApiStore, useRenderCounter, waitMs } from './helpers'
+import { setupApiStore, useRenderCounter } from './helpers'
 
 const MyContext = React.createContext<ReactReduxContextValue>(null as any)
 
@@ -32,7 +33,7 @@ describe('buildCreateApi', () => {
 
     const api = customCreateApi({
       baseQuery: async (arg: any) => {
-        await waitMs()
+        await delay(150)
 
         return {
           data: arg?.body ? { ...arg.body } : {},
@@ -112,7 +113,7 @@ describe('buildCreateApi', () => {
     )
     const api = createApi({
       baseQuery: async (arg: any) => {
-        await waitMs()
+        await delay(150)
 
         return {
           data: arg?.body ? { ...arg.body } : {},

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

@@ -1,5 +1,6 @@
 import { createApi } from '@reduxjs/toolkit/query'
-import { actionsReducer, setupApiStore, waitMs } from './helpers'
+import { delay } from 'msw'
+import { actionsReducer, setupApiStore } from './helpers'
 
 const baseQuery = (args?: any) => ({ data: args })
 const api = createApi({
@@ -43,7 +44,7 @@ it('invalidates the specified tags', async () => {
   await storeRef.store.dispatch(api.util.invalidateTags(['Banana', 'Bread']))
 
   // Slight pause to let the middleware run and such
-  await waitMs(20)
+  await delay(20)
 
   const firstSequence = [
     api.internalActions.middlewareRegistered.match,
@@ -58,7 +59,7 @@ it('invalidates the specified tags', async () => {
   await storeRef.store.dispatch(getBread.initiate(1))
   await storeRef.store.dispatch(api.util.invalidateTags([{ type: 'Bread' }]))
 
-  await waitMs(20)
+  await delay(20)
 
   expect(storeRef.store.getState().actions).toMatchSequence(
     ...firstSequence,

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

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

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

@@ -10,32 +10,32 @@ import type {
   QueryDefinition,
 } from '@reduxjs/toolkit/query'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-import type { SpyInstance } from 'vitest'
-import { vi } from 'vitest'
+import type { MockInstance } from 'vitest'
 
 import type {
   DefinitionsFromApi,
   OverrideResultType,
   TagTypesFromApi,
 } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
-import { HttpResponse, http } from 'msw'
+import { HttpResponse, delay, http } from 'msw'
 import nodeFetch from 'node-fetch'
-import type { SerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import {
   ANY,
-  expectExactType,
-  expectType,
   getSerializedHeaders,
   setupApiStore,
-  waitMs,
+  expectExactType,
+  expectType,
 } from './helpers'
+import type { SerializeQueryArgs } from '../defaultSerializeQueryArgs'
 import { server } from './mocks/server'
 
-const originalEnv = process.env.NODE_ENV
-beforeAll(() => void ((process.env as any).NODE_ENV = 'development'))
-afterAll(() => void ((process.env as any).NODE_ENV = originalEnv))
+beforeAll(() => {
+  vi.stubEnv('NODE_ENV', 'development')
+
+  return vi.unstubAllEnvs
+})
 
-let spy: SpyInstance
+let spy: MockInstance
 beforeAll(() => {
   spy = vi.spyOn(console, 'error').mockImplementation(() => {})
 })
@@ -185,7 +185,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')
@@ -460,11 +460,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`!"
       )
@@ -805,15 +805,15 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
     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)
   })
 

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

@@ -270,7 +270,7 @@ If you have multiple apis, you *have* to specify the reducerPath option when usi
    * It would be great to support this case as well, but for now:
    * "It is what it is."
    */
-  test.skip('common: two apis, only second middleware', async () => {
+  test.todo('common: two apis, only second middleware', async () => {
     const store = configureStore({
       reducer: {
         // @ts-ignore

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

@@ -1,22 +1,22 @@
-import * as React from 'react'
+import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit'
 import type { BaseQueryFn } from '@reduxjs/toolkit/query/react'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { http, HttpResponse } from 'msw'
-import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
-import axios from 'axios'
-import { expectExactType, hookWaitFor, setupApiStore } from './helpers'
-import { server } from './mocks/server'
 import {
+  act,
   fireEvent,
   render,
-  waitFor,
-  screen,
-  act,
   renderHook,
+  screen,
+  waitFor,
 } from '@testing-library/react'
+import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios from 'axios'
+import { HttpResponse, http } from 'msw'
+import * as React from 'react'
 import { useDispatch } from 'react-redux'
-import type { UnknownAction, ThunkDispatch } from '@reduxjs/toolkit'
+import { expectExactType, hookWaitFor, setupApiStore } from './helpers'
 import type { BaseQueryApi } from '../baseQueryTypes'
+import { server } from './mocks/server'
 
 const baseQuery = fetchBaseQuery({ baseUrl: 'https://example.com' })
 
@@ -34,8 +34,10 @@ const api = createApi({
 
 const storeRef = setupApiStore(api)
 
-const failQueryOnce = http.get('/query', () =>
-    HttpResponse.json({ value: 'failed' }, { status: 500 }), { once: true }
+const failQueryOnce = http.get(
+  '/query',
+  () => HttpResponse.json({ value: 'failed' }, { status: 500 }),
+  { once: true }
 )
 
 describe('fetchBaseQuery', () => {
@@ -86,7 +88,7 @@ describe('query error handling', () => {
   test('success', async () => {
     server.use(
       http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
@@ -107,7 +109,7 @@ describe('query error handling', () => {
   test('error', async () => {
     server.use(
       http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 })
+        HttpResponse.json({ value: 'error' }, { status: 500 })
       )
     )
     const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
@@ -131,7 +133,7 @@ describe('query error handling', () => {
   test('success -> error', async () => {
     server.use(
       http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
@@ -149,8 +151,10 @@ describe('query error handling', () => {
     )
 
     server.use(
-      http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 }), { once: true }
+      http.get(
+        'https://example.com/query',
+        () => HttpResponse.json({ value: 'error' }, { status: 500 }),
+        { once: true }
       )
     )
 
@@ -175,12 +179,14 @@ describe('query error handling', () => {
   test('error -> success', async () => {
     server.use(
       http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     server.use(
-      http.get('https://example.com/query', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 }), { once: true }
+      http.get(
+        'https://example.com/query',
+        () => HttpResponse.json({ value: 'error' }, { status: 500 }),
+        { once: true }
       )
     )
     const { result } = renderHook(() => api.endpoints.query.useQuery({}), {
@@ -218,7 +224,7 @@ describe('mutation error handling', () => {
   test('success', async () => {
     server.use(
       http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
@@ -243,7 +249,7 @@ describe('mutation error handling', () => {
   test('error', async () => {
     server.use(
       http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 })
+        HttpResponse.json({ value: 'error' }, { status: 500 })
       )
     )
     const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
@@ -271,7 +277,7 @@ describe('mutation error handling', () => {
   test('success -> error', async () => {
     server.use(
       http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     const { result } = renderHook(() => api.endpoints.mutation.useMutation(), {
@@ -295,8 +301,10 @@ describe('mutation error handling', () => {
     }
 
     server.use(
-      http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 }), { once: true }
+      http.post(
+        'https://example.com/mutation',
+        () => HttpResponse.json({ value: 'error' }, { status: 500 }),
+        { once: true }
       )
     )
 
@@ -324,12 +332,14 @@ describe('mutation error handling', () => {
   test('error -> success', async () => {
     server.use(
       http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'success' })
+        HttpResponse.json({ value: 'success' })
       )
     )
     server.use(
-      http.post('https://example.com/mutation', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 }), { once: true }
+      http.post(
+        'https://example.com/mutation',
+        () => HttpResponse.json({ value: 'error' }, { status: 500 }),
+        { once: true }
       )
     )
 
@@ -443,7 +453,7 @@ describe('custom axios baseQuery', () => {
   test('axios errors behave as expected', async () => {
     server.use(
       http.get('https://example.com/success', () =>
-          HttpResponse.json({ value: 'error' }, { status: 500 })
+        HttpResponse.json({ value: 'error' }, { status: 500 })
       )
     )
     const { result } = renderHook(() => api.endpoints.query.useQuery(), {
@@ -481,8 +491,10 @@ describe('error handling in a component', () => {
 
   test('a mutation is unwrappable and has the correct types', async () => {
     server.use(
-      http.get('https://example.com/success', () =>
-          HttpResponse.json(mockErrorResponse, { status: 500 }), { once: true }
+      http.get(
+        'https://example.com/success',
+        () => HttpResponse.json(mockErrorResponse, { status: 500 }),
+        { once: true }
       )
     )
 

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

@@ -1,7 +1,8 @@
-import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'
-import { setupApiStore, waitMs } from './helpers'
 import type { TagDescription } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
+import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'
 import { waitFor } from '@testing-library/react'
+import { delay } from 'msw'
+import { setupApiStore } from './helpers'
 
 const tagTypes = [
   'apple',
@@ -135,7 +136,7 @@ test.each(caseMatrix)(
 
     store.dispatch(invalidating.initiate())
     expect(queryCount).toBe(1)
-    await waitMs(2)
+    await delay(2)
     expect(queryCount).toBe(shouldInvalidate ? 2 : 1)
   }
 )