Skip to content

Commit 77bd929

Browse files
FaberVitaleFaberVitale
committed
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
1 parent 38c4631 commit 77bd929

File tree

9 files changed

+52
-93
lines changed

9 files changed

+52
-93
lines changed

‎packages/toolkit/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"@microsoft/api-extractor": "^7.13.2",
3131
"@size-limit/preset-small-lib": "^4.11.0",
3232
"@testing-library/react": "^13.3.0",
33-
"@testing-library/react-hooks": "^8.0.0",
3433
"@testing-library/user-event": "^14.2.0",
3534
"@types/convert-source-map": "^1.5.1",
3635
"@types/jest": "^24.0.11",

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
configureStore,
33
createAction,
44
createSlice,
5-
Dispatch,
65
isAnyOf,
76
} from '@reduxjs/toolkit'
87

@@ -185,7 +184,7 @@ describe('createListenerMiddleware', () => {
185184
middleware: (gDM) => gDM().prepend(listenerMiddleware.middleware),
186185
})
187186

188-
let foundExtra = null
187+
let foundExtra: number | null = null
189188

190189
const typedAddListener =
191190
listenerMiddleware.startListening as TypedStartListening<
@@ -1062,11 +1061,16 @@ describe('createListenerMiddleware', () => {
10621061
middleware: (gDM) => gDM().prepend(middleware),
10631062
})
10641063

1065-
let result = null
1064+
const typedAddListener =
1065+
startListening as TypedStartListening<
1066+
CounterState,
1067+
typeof store.dispatch
1068+
>
1069+
let result: [ReturnType<typeof increment>, CounterState, CounterState] | null = null
10661070

1067-
startListening({
1071+
typedAddListener({
10681072
predicate: incrementByAmount.match,
1069-
effect: async (_, listenerApi) => {
1073+
async effect(_: AnyAction, listenerApi) {
10701074
result = await listenerApi.take(increment.match)
10711075
},
10721076
})

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { server } from './mocks/server'
2121
import type { AnyAction } from 'redux'
2222
import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState'
2323
import type { SerializedError } from '@reduxjs/toolkit'
24-
import { renderHook } from '@testing-library/react-hooks'
24+
import { renderHook } from '@testing-library/react'
2525

2626
// Just setup a temporary in-memory counter for tests that `getIncrementedAmount`.
2727
// This can be used to test how many renders happen due to data changes or
@@ -1162,7 +1162,7 @@ describe('hooks tests', () => {
11621162
})
11631163

11641164
test('useMutation return value contains originalArgs', async () => {
1165-
const { result } = renderHook(api.endpoints.updateUser.useMutation, {
1165+
const { result } = renderHook(() => api.endpoints.updateUser.useMutation(), {
11661166
wrapper: storeRef.wrapper,
11671167
})
11681168
const arg = { name: 'Foo' }

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

+36-42
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { configureStore } from '@reduxjs/toolkit'
22
import { createApi } from '@reduxjs/toolkit/query/react'
3-
4-
import { renderHook } from '@testing-library/react-hooks'
3+
import { renderHook, waitFor } from '@testing-library/react'
54
import type { BaseQueryApi } from '../baseQueryTypes'
65
import { withProvider } from './helpers'
76

@@ -91,117 +90,112 @@ describe('re-triggering behavior on arg change', () => {
9190
beforeEach(() => void spy.mockClear())
9291

9392
test('re-trigger on literal value change', async () => {
94-
const { result, rerender, waitForNextUpdate } = renderHook(
93+
const { result, rerender } = renderHook(
9594
(props) => getUser.useQuery(props),
9695
{
9796
wrapper: withProvider(store),
9897
initialProps: 5,
9998
}
10099
)
101100

102-
while (result.current.status === 'pending') {
103-
await waitForNextUpdate()
104-
}
101+
await waitFor(() => {
102+
expect(result.current.status).not.toBe('pending')
103+
})
104+
105105
expect(spy).toHaveBeenCalledTimes(1)
106106

107107
for (let x = 1; x < 3; x++) {
108108
rerender(6)
109-
// @ts-ignore
110-
while (result.current.status === 'pending') {
111-
await waitForNextUpdate()
112-
}
109+
await waitFor(() => {
110+
expect(result.current.status).not.toBe('pending')
111+
})
113112
expect(spy).toHaveBeenCalledTimes(2)
114113
}
115114

116115
for (let x = 1; x < 3; x++) {
117116
rerender(7)
118-
// @ts-ignore
119-
while (result.current.status === 'pending') {
120-
await waitForNextUpdate()
121-
}
117+
await waitFor(() => {
118+
expect(result.current.status).not.toBe('pending')
119+
})
122120
expect(spy).toHaveBeenCalledTimes(3)
123121
}
124122
})
125123

126124
test('only re-trigger on shallow-equal arg change', async () => {
127-
const { result, rerender, waitForNextUpdate } = renderHook(
125+
const { result, rerender } = renderHook(
128126
(props) => getUser.useQuery(props),
129127
{
130128
wrapper: withProvider(store),
131129
initialProps: { name: 'Bob', likes: 'iceCream' },
132130
}
133131
)
134132

135-
while (result.current.status === 'pending') {
136-
await waitForNextUpdate()
137-
}
133+
await waitFor(() => {
134+
expect(result.current.status).not.toBe('pending')
135+
})
138136
expect(spy).toHaveBeenCalledTimes(1)
139137

140138
for (let x = 1; x < 3; x++) {
141139
rerender({ name: 'Bob', likes: 'waffles' })
142-
// @ts-ignore
143-
while (result.current.status === 'pending') {
144-
await waitForNextUpdate()
145-
}
140+
await waitFor(() => {
141+
expect(result.current.status).not.toBe('pending')
142+
})
146143
expect(spy).toHaveBeenCalledTimes(2)
147144
}
148145

149146
for (let x = 1; x < 3; x++) {
150147
rerender({ name: 'Alice', likes: 'waffles' })
151-
// @ts-ignore
152-
while (result.current.status === 'pending') {
153-
await waitForNextUpdate()
154-
}
148+
await waitFor(() => {
149+
expect(result.current.status).not.toBe('pending')
150+
})
155151
expect(spy).toHaveBeenCalledTimes(3)
156152
}
157153
})
158154

159155
test('re-triggers every time on deeper value changes', async () => {
160156
const name = 'Tim'
161157

162-
const { result, rerender, waitForNextUpdate } = renderHook(
158+
const { result, rerender } = renderHook(
163159
(props) => getUser.useQuery(props),
164160
{
165161
wrapper: withProvider(store),
166162
initialProps: { person: { name } },
167163
}
168164
)
169165

170-
while (result.current.status === 'pending') {
171-
await waitForNextUpdate()
172-
}
166+
await waitFor(() => {
167+
expect(result.current.status).not.toBe('pending')
168+
})
173169
expect(spy).toHaveBeenCalledTimes(1)
174170

175171
for (let x = 1; x < 3; x++) {
176172
rerender({ person: { name: name + x } })
177-
// @ts-ignore
178-
while (result.current.status === 'pending') {
179-
await waitForNextUpdate()
180-
}
173+
await waitFor(() => {
174+
expect(result.current.status).not.toBe('pending')
175+
})
181176
expect(spy).toHaveBeenCalledTimes(x + 1)
182177
}
183178
})
184179

185180
test('do not re-trigger if the order of keys change while maintaining the same values', async () => {
186-
const { result, rerender, waitForNextUpdate } = renderHook(
181+
const { result, rerender } = renderHook(
187182
(props) => getUser.useQuery(props),
188183
{
189184
wrapper: withProvider(store),
190185
initialProps: { name: 'Tim', likes: 'Bananas' },
191186
}
192187
)
193188

194-
while (result.current.status === 'pending') {
195-
await waitForNextUpdate()
196-
}
189+
await waitFor(() => {
190+
expect(result.current.status).not.toBe('pending')
191+
})
197192
expect(spy).toHaveBeenCalledTimes(1)
198193

199194
for (let x = 1; x < 3; x++) {
200195
rerender({ likes: 'Bananas', name: 'Tim' })
201-
// @ts-ignore
202-
while (result.current.status === 'pending') {
203-
await waitForNextUpdate()
204-
}
196+
await waitFor(() => {
197+
expect(result.current.status).not.toBe('pending')
198+
})
205199
expect(spy).toHaveBeenCalledTimes(1)
206200
}
207201
})

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import * as React from 'react'
22
import type { BaseQueryFn } from '@reduxjs/toolkit/query/react'
33
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
4-
import { renderHook, act } from '@testing-library/react-hooks'
54
import { rest } from 'msw'
65
import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
76
import axios from 'axios'
8-
97
import { expectExactType, hookWaitFor, setupApiStore } from './helpers'
108
import { server } from './mocks/server'
11-
import { fireEvent, render, waitFor, screen } from '@testing-library/react'
9+
import { fireEvent, render, waitFor, screen, act, renderHook } from '@testing-library/react'
1210
import { useDispatch } from 'react-redux'
1311
import type { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
1412
import type { BaseQueryApi } from '../baseQueryTypes'
@@ -498,7 +496,7 @@ describe('error handling in a component', () => {
498496
expectExactType(mockSuccessResponse)(result)
499497
setManualError(undefined)
500498
})
501-
.catch((error) => setManualError(error))
499+
.catch((error) => act(() => setManualError(error)))
502500
}}
503501
>
504502
Update User

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import type {
66
} from '@reduxjs/toolkit'
77
import { configureStore } from '@reduxjs/toolkit'
88
import { setupListeners } from '@reduxjs/toolkit/query'
9-
10-
import { act } from '@testing-library/react-hooks'
119
import type { Reducer } from 'react'
1210
import React, { useCallback } from 'react'
1311
import { Provider } from 'react-redux'
@@ -17,7 +15,7 @@ import {
1715
createConsole,
1816
getLog,
1917
} from 'console-testing-library/pure'
20-
import { cleanup } from '@testing-library/react'
18+
import { cleanup, act } from '@testing-library/react'
2119

2220
export const ANY = 0 as any
2321

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { SerializedError } from '@reduxjs/toolkit'
22
import { createSlice } from '@reduxjs/toolkit'
33
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
4-
import { renderHook, act } from '@testing-library/react-hooks'
4+
import { renderHook, act } from '@testing-library/react'
55
import {
66
actionsReducer,
77
expectExactType,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createApi } from '@reduxjs/toolkit/query/react'
22
import { actionsReducer, hookWaitFor, setupApiStore, waitMs } from './helpers'
3-
import { renderHook, act } from '@testing-library/react-hooks'
3+
import { renderHook, act } from '@testing-library/react'
44

55
interface Post {
66
id: string

‎yarn.lock

-34
Original file line numberDiff line numberDiff line change
@@ -5523,7 +5523,6 @@ __metadata:
55235523
"@microsoft/api-extractor": ^7.13.2
55245524
"@size-limit/preset-small-lib": ^4.11.0
55255525
"@testing-library/react": ^13.3.0
5526-
"@testing-library/react-hooks": ^8.0.0
55275526
"@testing-library/user-event": ^14.2.0
55285527
"@types/convert-source-map": ^1.5.1
55295528
"@types/jest": ^24.0.11
@@ -6148,28 +6147,6 @@ __metadata:
61486147
languageName: node
61496148
linkType: hard
61506149

6151-
"@testing-library/react-hooks@npm:^8.0.0":
6152-
version: 8.0.0
6153-
resolution: "@testing-library/react-hooks@npm:8.0.0"
6154-
dependencies:
6155-
"@babel/runtime": ^7.12.5
6156-
react-error-boundary: ^3.1.0
6157-
peerDependencies:
6158-
"@types/react": ^16.9.0 || ^17.0.0
6159-
react: ^16.9.0 || ^17.0.0
6160-
react-dom: ^16.9.0 || ^17.0.0
6161-
react-test-renderer: ^16.9.0 || ^17.0.0
6162-
peerDependenciesMeta:
6163-
"@types/react":
6164-
optional: true
6165-
react-dom:
6166-
optional: true
6167-
react-test-renderer:
6168-
optional: true
6169-
checksum: f45bd06601bf1d00e375c3d945b0e54b4d997b18402c45711deada7e8c4a8f569fe283973e6786c9ecd55e4bd01a43bd42546a2924453065880abf4b13dbafdb
6170-
languageName: node
6171-
linkType: hard
6172-
61736150
"@testing-library/react@npm:^13.3.0":
61746151
version: 13.3.0
61756152
resolution: "@testing-library/react@npm:13.3.0"
@@ -22716,17 +22693,6 @@ fsevents@^1.2.7:
2271622693
languageName: node
2271722694
linkType: hard
2271822695

22719-
"react-error-boundary@npm:^3.1.0":
22720-
version: 3.1.3
22721-
resolution: "react-error-boundary@npm:3.1.3"
22722-
dependencies:
22723-
"@babel/runtime": ^7.12.5
22724-
peerDependencies:
22725-
react: ">=16.13.1"
22726-
checksum: 0a05af404aa054c54d7bc65a1814810093bf136c3ad4b3576a51d8509ee8fc302adfb66405da501fc01e839db557dd0d994b487e651897e36293907bb61458cf
22727-
languageName: node
22728-
linkType: hard
22729-
2273022696
"react-error-overlay@npm:^6.0.11, react-error-overlay@npm:^6.0.9":
2273122697
version: 6.0.11
2273222698
resolution: "react-error-overlay@npm:6.0.11"

0 commit comments

Comments
 (0)