Fix remaining import issues in test files

Author: aryaemami59

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

@@ -15,7 +15,6 @@ import {
   createStoreHook,
 } from 'react-redux'
 import { setupApiStore, useRenderCounter } from '../../tests/utils/helpers'
-import { delay } from '../../utils'
 
 const MyContext = React.createContext<ReactReduxContextValue>(null as any)
 

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

@@ -1,42 +1,43 @@
-import type { SerializedError, UnknownAction } from '@reduxjs/toolkit';
+import type { SerializedError, UnknownAction } from '@reduxjs/toolkit'
 import {
   configureStore,
   createListenerMiddleware,
   createSlice,
-} from '@reduxjs/toolkit';
-import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState';
+} from '@reduxjs/toolkit'
+import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState'
 import type {
   UseMutation,
   UseQuery,
-} from '@reduxjs/toolkit/dist/query/react/buildHooks';
+} from '@reduxjs/toolkit/dist/query/react/buildHooks'
 import {
   QueryStatus,
   createApi,
   fetchBaseQuery,
   skipToken,
-} from '@reduxjs/toolkit/query/react';
+} from '@reduxjs/toolkit/query/react'
 import {
   act,
   fireEvent,
   render,
   renderHook,
   screen,
   waitFor,
-  renderHook,
 } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { http, HttpResponse } from 'msw'
+import { HttpResponse, http } from 'msw'
+import { useEffect, useState } from 'react'
+import type { MockInstance } from 'vitest'
 import {
   actionsReducer,
   setupApiStore,
   useRenderCounter,
   waitMs,
   withProvider,
-} from '../../tests/utils/helpers';
-import { expectExactType, expectType } from '../../tests/utils/typeTestHelpers';
-import type { SubscriptionSelectors } from '../core/buildMiddleware/types';
-import { countObjectKeys } from '../utils/countObjectKeys';
-import { server } from './mocks/server';
+} from '../../tests/utils/helpers'
+import { expectExactType, expectType } from '../../tests/utils/typeTestHelpers'
+import type { SubscriptionSelectors } from '../core/buildMiddleware/types'
+import { countObjectKeys } from '../utils/countObjectKeys'
+import { server } from './mocks/server'
 
 // Just setup a temporary in-memory counter for tests that `getIncrementedAmount`.
 // This can be used to test how many renders happen due to data changes or
@@ -188,7 +189,7 @@ describe('hooks tests', () => {
 
     test('useQuery hook sets isFetching=true whenever a request is in flight', async () => {
       function User() {
-        const [value, setValue] = React.useState(0)
+        const [value, setValue] = useState(0)
 
         const { isFetching } = api.endpoints.getUser.useQuery(1, {
           skip: value < 1,
@@ -229,7 +230,7 @@ describe('hooks tests', () => {
     test('useQuery hook sets isLoading=true only on initial request', async () => {
       let refetch: any, isLoading: boolean, isFetching: boolean
       function User() {
-        const [value, setValue] = React.useState(0)
+        const [value, setValue] = useState(0)
 
         ;({ isLoading, isFetching, refetch } = api.endpoints.getUser.useQuery(
           2,
@@ -278,7 +279,7 @@ describe('hooks tests', () => {
     test('useQuery hook sets isLoading and isFetching to the correct states', async () => {
       let refetchMe: () => void = () => {}
       function User() {
-        const [value, setValue] = React.useState(0)
+        const [value, setValue] = useState(0)
         getRenderCount = useRenderCounter()
 
         const { isLoading, isFetching, refetch } =
@@ -344,10 +345,10 @@ describe('hooks tests', () => {
         const { isLoading, isFetching, status } =
           api.endpoints.getUser.useQuery(id)
 
-        React.useEffect(() => {
+        useEffect(() => {
           loadingHist.push(isLoading)
         }, [isLoading])
-        React.useEffect(() => {
+        useEffect(() => {
           fetchingHist.push(isFetching)
         }, [isFetching])
         return (
@@ -509,7 +510,7 @@ describe('hooks tests', () => {
     test('refetchOnMountOrArgChange works as expected when changing skip from false->true', async () => {
       let data, isLoading, isFetching
       function User() {
-        const [skip, setSkip] = React.useState(true)
+        const [skip, setSkip] = useState(true)
         ;({ data, isLoading, isFetching } =
           api.endpoints.getIncrementedAmount.useQuery(undefined, {
             refetchOnMountOrArgChange: 0.5,
@@ -555,7 +556,7 @@ describe('hooks tests', () => {
 
       let data, isLoading, isFetching
       function User() {
-        const [skip, setSkip] = React.useState(true)
+        const [skip, setSkip] = useState(true)
         ;({ data, isLoading, isFetching } =
           api.endpoints.getIncrementedAmount.useQuery(undefined, {
             skip,
@@ -633,7 +634,7 @@ describe('hooks tests', () => {
 
     test(`useQuery refetches when query args object changes even if serialized args don't change`, async () => {
       function ItemList() {
-        const [pageNumber, setPageNumber] = React.useState(0)
+        const [pageNumber, setPageNumber] = useState(0)
         const { data = [] } = api.useListItemsQuery({ pageNumber })
 
         const renderedItems = data.map((item) => (
@@ -908,7 +909,7 @@ describe('hooks tests', () => {
     test('useLazyQuery accepts updated subscription options and only dispatches updateSubscriptionOptions when values are updated', async () => {
       let interval = 1000
       function User() {
-        const [options, setOptions] = React.useState<SubscriptionOptions>()
+        const [options, setOptions] = useState<SubscriptionOptions>()
         const [fetchUser, { data: hookData, isFetching, isUninitialized }] =
           api.endpoints.getUser.useLazyQuery(options)
         getRenderCount = useRenderCounter()
@@ -1066,7 +1067,7 @@ describe('hooks tests', () => {
     test('useLazyQuery hook callback returns various properties to handle the result', async () => {
       function User() {
         const [getUser] = api.endpoints.getUser.useLazyQuery()
-        const [{ successMsg, errMsg, isAborted }, setValues] = React.useState({
+        const [{ successMsg, errMsg, isAborted }, setValues] = useState({
           successMsg: '',
           errMsg: '',
           isAborted: false,
@@ -1160,7 +1161,7 @@ describe('hooks tests', () => {
         const [getUser, { data, error }] =
           api.endpoints.getUserAndForceError.useLazyQuery()
 
-        const [unwrappedError, setUnwrappedError] = React.useState<any>()
+        const [unwrappedError, setUnwrappedError] = useState<any>()
 
         const handleClick = async () => {
           const res = getUser(1)
@@ -1213,7 +1214,7 @@ describe('hooks tests', () => {
       function User() {
         const [getUser, { data, error }] = api.endpoints.getUser.useLazyQuery()
 
-        const [unwrappedResult, setUnwrappedResult] = React.useState<
+        const [unwrappedResult, setUnwrappedResult] = useState<
           undefined | { name: string }
         >()
 
@@ -1320,9 +1321,9 @@ describe('hooks tests', () => {
     test('useMutation hook callback returns various properties to handle the result', async () => {
       function User() {
         const [updateUser] = api.endpoints.updateUser.useMutation()
-        const [successMsg, setSuccessMsg] = React.useState('')
-        const [errMsg, setErrMsg] = React.useState('')
-        const [isAborted, setIsAborted] = React.useState(false)
+        const [successMsg, setSuccessMsg] = useState('')
+        const [errMsg, setErrMsg] = useState('')
+        const [isAborted, setIsAborted] = useState(false)
 
         const handleClick = async () => {
           const res = updateUser({ name: 'Banana' })
@@ -1750,14 +1751,18 @@ 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(
-        http.get('https://example.com/me', () => {
+        http.get(
+          'https://example.com/me',
+          () => {
             return HttpResponse.json(null, { status: 500 })
-        }, { once: true }),
+          },
+          { once: true }
+        ),
         http.get('https://example.com/me', () => {
-            return HttpResponse.json(checkSessionData)
+          return HttpResponse.json(checkSessionData)
         }),
         http.post('https://example.com/login', () => {
-            return HttpResponse.json(null, { status: 200 })
+          return HttpResponse.json(null, { status: 200 })
         })
       )
       let data, isLoading, isError
@@ -1976,12 +1981,12 @@ describe('hooks with createApi defaults set', () => {
 
       const handlers = [
         http.get('https://example.com/posts', () => {
-            return HttpResponse.json(posts)
+          return HttpResponse.json(posts)
         }),
         http.put<{ id: string }, Partial<Post>>(
           'https://example.com/post/:id',
           async ({ request, params }) => {
-              const body = await request.json();
+            const body = await request.json()
             const id = Number(params.id)
             const idx = posts.findIndex((post) => post.id === id)
 
@@ -1997,20 +2002,23 @@ describe('hooks with createApi defaults set', () => {
             )
             posts = [...newPosts]
 
-              return HttpResponse.json(posts)
+            return HttpResponse.json(posts)
           }
         ),
-        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,
-          })
+        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 HttpResponse.json(posts)
-        }),
+          }
+        ),
       ]
 
       server.use(...handlers)
@@ -2292,7 +2300,7 @@ describe('hooks with createApi defaults set', () => {
         })
         getRenderCount = useRenderCounter()
 
-        React.useEffect(() => {
+        useEffect(() => {
           expectablePost = post
         }, [post])
 
@@ -2379,7 +2387,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 res2 = api.endpoints.getPosts.useQuery(undefined, {
           // selectFromResult must always return an object
           selectFromResult: ({ data }) => ({ size: data?.length ?? 0 }),

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

@@ -20,6 +20,12 @@ import type {
 } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
 import { HttpResponse, delay, http } from 'msw'
 import nodeFetch from 'node-fetch'
+import {
+  ANY,
+  getSerializedHeaders,
+  setupApiStore,
+} from '../../tests/utils/helpers'
+import { expectExactType, expectType } from '../../tests/utils/typeTestHelpers'
 import { server } from './mocks/server'
 
 beforeAll(() => {

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

@@ -1,17 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-import { vi } from 'vitest'
-import { setupApiStore, waitMs } from '../../tests/utils/helpers'
-import { server } from './mocks/server'
-// @ts-ignore
-import nodeFetch from 'node-fetch'
-import { setupApiStore } from './helpers'
-import { server } from './mocks/server'
-
 import { headersToObject } from 'headers-polyfill'
 import { HttpResponse, delay, http } from 'msw'
+import nodeFetch from 'node-fetch'
 import queryString from 'query-string'
+import { vi } from 'vitest'
+import { setupApiStore } from '../../tests/utils/helpers'
 import type { BaseQueryApi } from '../baseQueryTypes'
+import { server } from './mocks/server'
 
 const defaultHeaders: Record<string, string> = {
   fake: 'header',
@@ -28,7 +24,7 @@ const baseQuery = fetchBaseQuery({
   baseUrl,
   fetchFn: fetchFn as any,
   prepareHeaders: (headers, { getState }) => {
-    const token = (getState() as RootState).auth.token
+    const { token } = (getState() as RootState).auth
 
     // If we have a token set in state, let's assume that we should be passing it.
     if (token) {

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

@@ -65,13 +65,13 @@ describe('polling tests', () => {
 
     const getSubs = createSubscriptionGetter(queryCacheKey)
 
-    await waitMs(1)
+    await delay(1)
     expect(Object.keys(getSubs())).toHaveLength(1)
     expect(getSubs()[requestId].pollingInterval).toBe(10)
 
     subscription.updateSubscriptionOptions({ pollingInterval: 20 })
 
-    await waitMs(1)
+    await delay(1)
     expect(Object.keys(getSubs())).toHaveLength(1)
     expect(getSubs()[requestId].pollingInterval).toBe(20)
   })
@@ -91,15 +91,15 @@ describe('polling tests', () => {
       })
     )
 
-    await waitMs(10)
+    await delay(10)
 
     const getSubs = createSubscriptionGetter(subscriptionOne.queryCacheKey)
 
     expect(Object.keys(getSubs())).toHaveLength(2)
 
     subscriptionOne.unsubscribe()
 
-    await waitMs(1)
+    await delay(1)
     expect(Object.keys(getSubs())).toHaveLength(1)
   })
 

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

@@ -36,7 +36,7 @@ const defaultApi = createApi({
 
 const storeRef = setupApiStore(defaultApi)
 
-let getIncrementedAmountState = () =>
+const getIncrementedAmountState = () =>
   storeRef.store.getState().api.queries['getIncrementedAmount(undefined)']
 
 afterEach(() => {
@@ -217,7 +217,7 @@ describe('refetchOnFocus tests', () => {
       fireEvent.focus(window)
     })
 
-    await waitMs(1)
+    await delay(1)
     expect(getIncrementedAmountState()).toBeUndefined()
   })
 })

packages/toolkit/src/tests/utils/helpers.tsx

@@ -154,7 +154,7 @@ expect.extend({
   ) {
     const restore = mockConsole(createConsole())
     await fn()
-    const log = getLog().log
+    const { log } = getLog()
     restore()
 
     if (normalize(log) === normalize(expectedOutput))