Merge pull request #4686 from isqua/act

Update @testing-library/react from 13.3.0 to 16.0.1; Fixes #4685

Author: markerikson

examples/query/react/basic/package.json

@@ -13,7 +13,8 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^26.0.23",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.5",

examples/query/react/kitchen-sink/package.json

@@ -15,8 +15,9 @@
     "react-scripts": "5.0.1"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.6",
     "@types/react": "^18.0.5",

packages/toolkit/package.json

@@ -56,8 +56,9 @@
     "@phryneas/ts-version": "^1.0.2",
     "@size-limit/file": "^11.0.1",
     "@size-limit/webpack": "^11.0.1",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.1.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/json-stringify-safe": "^5.0.0",

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

@@ -32,6 +32,10 @@ const api = createApi({
   }),
 })
 
+afterEach(() => {
+  vi.resetAllMocks()
+})
+
 describe('ApiProvider', () => {
   test('ApiProvider allows a user to make queries without a traditional Redux setup', async () => {
     function User() {
@@ -72,6 +76,8 @@ describe('ApiProvider', () => {
     expect(getByTestId('isFetching').textContent).toBe('false')
   })
   test('ApiProvider throws if nested inside a Redux context', () => {
+    // Intentionally swallow the "unhandled error" message
+    vi.spyOn(console, 'error').mockImplementation(() => {})
     expect(() =>
       render(
         <Provider store={configureStore({ reducer: () => null })}>

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

@@ -6,6 +6,7 @@ import {
   actionsReducer,
   setupApiStore,
   useRenderCounter,
+  waitForFakeTimer,
   waitMs,
   withProvider,
 } from '@internal/tests/utils/helpers'
@@ -47,7 +48,7 @@ interface Item {
 
 const api = createApi({
   baseQuery: async (arg: any) => {
-    await waitMs(150)
+    await waitForFakeTimer(150)
     if (arg?.body && 'amount' in arg.body) {
       amount += 1
     }
@@ -465,7 +466,6 @@ describe('hooks tests', () => {
           <div>
             <button
               onClick={() => {
-                console.log('Refetching')
                 refetch()
               }}
             >
@@ -915,7 +915,7 @@ describe('hooks tests', () => {
         resPromise = refetch()
       })
       expect(resPromise).toBeInstanceOf(Promise)
-      const res = await resPromise
+      const res = await act(() => resPromise)
       expect(res.data!.amount).toBeGreaterThan(originalAmount)
     })
 
@@ -1095,15 +1095,15 @@ describe('hooks tests', () => {
       // Allow at least three state effects to hit.
       // Trying to see if any [true, false, true] occurs.
       await act(async () => {
-        await waitMs(1)
+        await waitForFakeTimer(150)
       })
 
       await act(async () => {
-        await waitMs(1)
+        await waitForFakeTimer(150)
       })
 
       await act(async () => {
-        await waitMs(1)
+        await waitForFakeTimer(150)
       })
 
       // Find if at any time the isLoading state has reverted
@@ -1864,7 +1864,8 @@ describe('hooks tests', () => {
         expect(screen.getByTestId('isFetching').textContent).toBe('false'),
       )
 
-      userEvent.hover(screen.getByTestId('highPriority'))
+      await userEvent.hover(screen.getByTestId('highPriority'))
+
       expect(
         api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any),
       ).toEqual({
@@ -2001,7 +2002,7 @@ describe('hooks tests', () => {
       await waitMs(400)
 
       // This should run the query being that we're past the threshold
-      userEvent.hover(screen.getByTestId('lowPriority'))
+      await userEvent.hover(screen.getByTestId('lowPriority'))
       expect(
         api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any),
       ).toEqual({
@@ -2101,7 +2102,7 @@ describe('hooks tests', () => {
 
       render(<User />, { wrapper: storeRef.wrapper })
 
-      userEvent.hover(screen.getByTestId('lowPriority'))
+      await userEvent.hover(screen.getByTestId('lowPriority'))
 
       expect(
         api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any),
@@ -2993,6 +2994,11 @@ describe('skip behavior', () => {
     await act(async () => {
       rerender([1])
     })
+
+    await act(async () => {
+      await waitForFakeTimer(150)
+    })
+
     expect(result.current).toMatchObject({ status: QueryStatus.fulfilled })
     await waitMs(1)
     expect(getSubscriptionCount('getUser(1)')).toBe(1)
@@ -3030,6 +3036,11 @@ describe('skip behavior', () => {
     await act(async () => {
       rerender([1])
     })
+
+    await act(async () => {
+      await waitForFakeTimer(150)
+    })
+
     expect(result.current).toMatchObject({ status: QueryStatus.fulfilled })
     await waitMs(1)
     expect(getSubscriptionCount('getUser(1)')).toBe(1)
@@ -3059,7 +3070,7 @@ describe('skip behavior', () => {
     )
 
     await act(async () => {
-      await waitMs(1)
+      await waitForFakeTimer(150)
     })
 
     // Normal fulfilled result, with both `data` and `currentData`

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

@@ -43,7 +43,7 @@ function UsingAB() {
 }
 
 beforeAll(() => {
-  vi.useFakeTimers()
+  vi.useFakeTimers({ shouldAdvanceTime: true })
 })
 
 test('data stays in store when component stays rendered', async () => {

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

@@ -862,7 +862,7 @@ describe('fetchBaseQuery', () => {
           prepare.apply(undefined, arguments as unknown as any[])
         },
       })
-      baseQuery('http://example.com', commonBaseQueryApi, {
+      baseQuery('https://example.com', commonBaseQueryApi, {
         foo: 'baz',
         bar: 5,
       })

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

@@ -12,6 +12,12 @@ export const posts: Record<string, Post> = {
 }
 
 export const handlers = [
+  http.get(
+    'https://example.com',
+    async ({ request, params, cookies, requestId }) => {
+      HttpResponse.json({ value: 'success' })
+    },
+  ),
   http.get(
     'https://example.com/echo',
     async ({ request, params, cookies, requestId }) => {

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

@@ -399,27 +399,34 @@ describe('upsertQueryEntries', () => {
     storeRef.store.dispatch(entriesAction)
 
     // Tricky timing. The cache data promises will be resolved
-    // in microtasks, so we just need any async delay here.
-    await delay(1)
+    // in microtasks. We need to wait for them. Best to do this
+    // in a loop just to avoid a hardcoded delay, but also this
+    // needs to complete before `keepUnusedDataFor` expires them.
+    await waitFor(
+      () => {
+        const state = storeRef.store.getState()
+
+        // onCacheEntryAdded should have run for each post,
+        // including cache data being resolved
+        for (const post of posts) {
+          const matchingSideEffectAction = state.actions.find(
+            (action) =>
+              postAddedAction.match(action) && action.payload === post.id,
+          )
+          expect(matchingSideEffectAction).toBeTruthy()
+        }
 
-    const state = storeRef.store.getState()
+        const selectedData =
+          api.endpoints.postWithSideEffect.select('1')(state).data
 
-    // onCacheEntryAdded should have run for each post,
-    // including cache data being resolved
-    for (const post of posts) {
-      const matchingSideEffectAction = state.actions.find(
-        (action) => postAddedAction.match(action) && action.payload === post.id,
-      )
-      expect(matchingSideEffectAction).toBeTruthy()
-    }
-
-    expect(api.endpoints.postWithSideEffect.select('1')(state).data).toBe(
-      posts[0],
+        expect(selectedData).toBe(posts[0])
+      },
+      { timeout: 50, interval: 5 },
     )
 
     // The cache data should be removed after the keepUnusedDataFor time,
     // so wait longer than that
-    await delay(20)
+    await delay(100)
 
     const stateAfter = storeRef.store.getState()
 

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

@@ -71,12 +71,12 @@ describe('refetchOnFocus tests', () => {
       expect(screen.getByTestId('amount').textContent).toBe('1'),
     )
 
+    fireEvent.focus(window)
+
     await act(async () => {
-      fireEvent.focus(window)
+      await delay(150)
     })
 
-    await delay(150)
-
     await waitFor(() =>
       expect(screen.getByTestId('amount').textContent).toBe('2'),
     )
@@ -111,9 +111,7 @@ describe('refetchOnFocus tests', () => {
       expect(screen.getByTestId('amount').textContent).toBe('1'),
     )
 
-    act(() => {
-      fireEvent.focus(window)
-    })
+    fireEvent.focus(window)
 
     await delay(150)
 
@@ -165,9 +163,7 @@ describe('refetchOnFocus tests', () => {
       expect(screen.getByTestId('amount').textContent).toBe('1'),
     )
 
-    act(() => {
-      fireEvent.focus(window)
-    })
+    fireEvent.focus(window)
     expect(screen.getByTestId('isLoading').textContent).toBe('false')
     await waitFor(() =>
       expect(screen.getByTestId('isFetching').textContent).toBe('true'),
@@ -213,9 +209,7 @@ describe('refetchOnFocus tests', () => {
 
     expect(getIncrementedAmountState()).not.toBeUndefined()
 
-    await act(async () => {
-      fireEvent.focus(window)
-    })
+    fireEvent.focus(window)
 
     await delay(1)
     expect(getIncrementedAmountState()).toBeUndefined()