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
brandoncroberts · Jun 12, 2022 · e14c942 · e14c942
1 parent cd525e2
commit e14c942
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 59 deletions.
diff --git a/packages/toolkit/package.json b/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",

diff --git a/packages/toolkit/src/listenerMiddleware/tests/listenerMiddleware.test.ts b/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)
         },
       })

diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/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' }

diff --git a/packages/toolkit/src/query/tests/buildThunks.test.tsx b/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)
     }
   })

diff --git a/packages/toolkit/src/query/tests/errorHandling.test.tsx b/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

diff --git a/packages/toolkit/src/query/tests/helpers.tsx b/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
 

diff --git a/packages/toolkit/src/query/tests/matchers.test.tsx b/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,

diff --git a/packages/toolkit/src/query/tests/optimisticUpdates.test.tsx b/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