chore: remove obsolete dep @testing-library/react-hooks

Description

@testing-library/react now has a renderHook api.

See:

- testing-library/react-testing-library#991
- testing-library/testing-library-docs#967
- testing-library/react-hooks-testing-library#849

Author: FaberVitale

packages/toolkit/package.json

@@ -30,7 +30,6 @@
     "@microsoft/api-extractor": "^7.13.2",
     "@size-limit/preset-small-lib": "^4.11.0",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.2.0",
     "@types/convert-source-map": "^1.5.1",
     "@types/jest": "^24.0.11",

packages/toolkit/src/listenerMiddleware/tests/listenerMiddleware.test.ts

@@ -2,7 +2,6 @@ import {
   configureStore,
   createAction,
   createSlice,
-  Dispatch,
   isAnyOf,
 } from '@reduxjs/toolkit'
 
@@ -185,7 +184,7 @@ describe('createListenerMiddleware', () => {
         middleware: (gDM) => gDM().prepend(listenerMiddleware.middleware),
       })
 
-      let foundExtra = null
+      let foundExtra: number | null  = null
 
       const typedAddListener =
         listenerMiddleware.startListening as TypedStartListening<
@@ -1062,11 +1061,16 @@ describe('createListenerMiddleware', () => {
         middleware: (gDM) => gDM().prepend(middleware),
       })
 
-      let result = null
+      const typedAddListener =
+        startListening as TypedStartListening<
+          CounterState,
+          typeof store.dispatch
+        >
+      let result: [ReturnType<typeof increment>, CounterState, CounterState] | null = null
 
-      startListening({
+      typedAddListener({
         predicate: incrementByAmount.match,
-        effect: async (_, listenerApi) => {
+        async effect(_: AnyAction, listenerApi) {
           result = await listenerApi.take(increment.match)
         },
       })

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

@@ -21,7 +21,7 @@ import { server } from './mocks/server'
 import type { AnyAction } from 'redux'
 import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState'
 import type { SerializedError } from '@reduxjs/toolkit'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 // 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
@@ -1162,7 +1162,7 @@ describe('hooks tests', () => {
     })
 
     test('useMutation return value contains originalArgs', async () => {
-      const { result } = renderHook(api.endpoints.updateUser.useMutation, {
+      const { result } = renderHook(() => api.endpoints.updateUser.useMutation(), {
         wrapper: storeRef.wrapper,
       })
       const arg = { name: 'Foo' }

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

@@ -1,7 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { createApi } from '@reduxjs/toolkit/query/react'
-
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook, waitFor } from '@testing-library/react'
 import type { BaseQueryApi } from '../baseQueryTypes'
 import { withProvider } from './helpers'
 
@@ -91,117 +90,112 @@ describe('re-triggering behavior on arg change', () => {
   beforeEach(() => void spy.mockClear())
 
   test('re-trigger on literal value change', async () => {
-    const { result, rerender, waitForNextUpdate } = renderHook(
+    const { result, rerender } = renderHook(
       (props) => getUser.useQuery(props),
       {
         wrapper: withProvider(store),
         initialProps: 5,
       }
     )
 
-    while (result.current.status === 'pending') {
-      await waitForNextUpdate()
-    }
+    await waitFor(() => {
+      expect(result.current.status).not.toBe('pending')
+    })
+    
     expect(spy).toHaveBeenCalledTimes(1)
 
     for (let x = 1; x < 3; x++) {
       rerender(6)
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(2)
     }
 
     for (let x = 1; x < 3; x++) {
       rerender(7)
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(3)
     }
   })
 
   test('only re-trigger on shallow-equal arg change', async () => {
-    const { result, rerender, waitForNextUpdate } = renderHook(
+    const { result, rerender } = renderHook(
       (props) => getUser.useQuery(props),
       {
         wrapper: withProvider(store),
         initialProps: { name: 'Bob', likes: 'iceCream' },
       }
     )
 
-    while (result.current.status === 'pending') {
-      await waitForNextUpdate()
-    }
+    await waitFor(() => {
+      expect(result.current.status).not.toBe('pending')
+    })
     expect(spy).toHaveBeenCalledTimes(1)
 
     for (let x = 1; x < 3; x++) {
       rerender({ name: 'Bob', likes: 'waffles' })
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(2)
     }
 
     for (let x = 1; x < 3; x++) {
       rerender({ name: 'Alice', likes: 'waffles' })
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(3)
     }
   })
 
   test('re-triggers every time on deeper value changes', async () => {
     const name = 'Tim'
 
-    const { result, rerender, waitForNextUpdate } = renderHook(
+    const { result, rerender } = renderHook(
       (props) => getUser.useQuery(props),
       {
         wrapper: withProvider(store),
         initialProps: { person: { name } },
       }
     )
 
-    while (result.current.status === 'pending') {
-      await waitForNextUpdate()
-    }
+    await waitFor(() => {
+      expect(result.current.status).not.toBe('pending')
+    })
     expect(spy).toHaveBeenCalledTimes(1)
 
     for (let x = 1; x < 3; x++) {
       rerender({ person: { name: name + x } })
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(x + 1)
     }
   })
 
   test('do not re-trigger if the order of keys change while maintaining the same values', async () => {
-    const { result, rerender, waitForNextUpdate } = renderHook(
+    const { result, rerender } = renderHook(
       (props) => getUser.useQuery(props),
       {
         wrapper: withProvider(store),
         initialProps: { name: 'Tim', likes: 'Bananas' },
       }
     )
 
-    while (result.current.status === 'pending') {
-      await waitForNextUpdate()
-    }
+    await waitFor(() => {
+      expect(result.current.status).not.toBe('pending')
+    })
     expect(spy).toHaveBeenCalledTimes(1)
 
     for (let x = 1; x < 3; x++) {
       rerender({ likes: 'Bananas', name: 'Tim' })
-      // @ts-ignore
-      while (result.current.status === 'pending') {
-        await waitForNextUpdate()
-      }
+      await waitFor(() => {
+        expect(result.current.status).not.toBe('pending')
+      })
       expect(spy).toHaveBeenCalledTimes(1)
     }
   })

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

@@ -1,14 +1,12 @@
 import * as React from 'react'
 import type { BaseQueryFn } from '@reduxjs/toolkit/query/react'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { renderHook, act } from '@testing-library/react-hooks'
 import { rest } 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 { fireEvent, render, waitFor, screen } from '@testing-library/react'
+import { fireEvent, render, waitFor, screen, act, renderHook } from '@testing-library/react'
 import { useDispatch } from 'react-redux'
 import type { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
 import type { BaseQueryApi } from '../baseQueryTypes'
@@ -498,7 +496,7 @@ describe('error handling in a component', () => {
                   expectExactType(mockSuccessResponse)(result)
                   setManualError(undefined)
                 })
-                .catch((error) => setManualError(error))
+                .catch((error) => act(() => setManualError(error)))
             }}
           >
             Update User

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

@@ -6,8 +6,6 @@ import type {
 } from '@reduxjs/toolkit'
 import { configureStore } from '@reduxjs/toolkit'
 import { setupListeners } from '@reduxjs/toolkit/query'
-
-import { act } from '@testing-library/react-hooks'
 import type { Reducer } from 'react'
 import React, { useCallback } from 'react'
 import { Provider } from 'react-redux'
@@ -17,7 +15,7 @@ import {
   createConsole,
   getLog,
 } from 'console-testing-library/pure'
-import { cleanup } from '@testing-library/react'
+import { cleanup, act } from '@testing-library/react'
 
 export const ANY = 0 as any
 

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

@@ -1,7 +1,7 @@
 import type { SerializedError } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import {
   actionsReducer,
   expectExactType,

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

@@ -1,6 +1,6 @@
 import { createApi } from '@reduxjs/toolkit/query/react'
 import { actionsReducer, hookWaitFor, setupApiStore, waitMs } from './helpers'
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 
 interface Post {
   id: string

yarn.lock

@@ -5523,7 +5523,6 @@ __metadata:
     "@microsoft/api-extractor": ^7.13.2
     "@size-limit/preset-small-lib": ^4.11.0
     "@testing-library/react": ^13.3.0
-    "@testing-library/react-hooks": ^8.0.0
     "@testing-library/user-event": ^14.2.0
     "@types/convert-source-map": ^1.5.1
     "@types/jest": ^24.0.11
@@ -6148,28 +6147,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-hooks@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "@testing-library/react-hooks@npm:8.0.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    react-error-boundary: ^3.1.0
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0
-    react: ^16.9.0 || ^17.0.0
-    react-dom: ^16.9.0 || ^17.0.0
-    react-test-renderer: ^16.9.0 || ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    react-dom:
-      optional: true
-    react-test-renderer:
-      optional: true
-  checksum: f45bd06601bf1d00e375c3d945b0e54b4d997b18402c45711deada7e8c4a8f569fe283973e6786c9ecd55e4bd01a43bd42546a2924453065880abf4b13dbafdb
-  languageName: node
-  linkType: hard
-
 "@testing-library/react@npm:^13.3.0":
   version: 13.3.0
   resolution: "@testing-library/react@npm:13.3.0"
@@ -22716,17 +22693,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-error-boundary@npm:^3.1.0":
-  version: 3.1.3
-  resolution: "react-error-boundary@npm:3.1.3"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-  peerDependencies:
-    react: ">=16.13.1"
-  checksum: 0a05af404aa054c54d7bc65a1814810093bf136c3ad4b3576a51d8509ee8fc302adfb66405da501fc01e839db557dd0d994b487e651897e36293907bb61458cf
-  languageName: node
-  linkType: hard
-
 "react-error-overlay@npm:^6.0.11, react-error-overlay@npm:^6.0.9":
   version: 6.0.11
   resolution: "react-error-overlay@npm:6.0.11"