From 77bd929ef4c5acc2fd0cc631cdba1fcc38631998 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sun, 12 Jun 2022 12:51:48 +0200 Subject: [PATCH] chore: remove obsolete dep @testing-library/react-hooks Description @testing-library/react now has a renderHook api. See: - https://github.com/testing-library/react-testing-library/pull/991 - https://github.com/testing-library/testing-library-docs/pull/967 - https://github.com/testing-library/react-hooks-testing-library/issues/849 --- packages/toolkit/package.json | 1 - .../tests/listenerMiddleware.test.ts | 14 ++-- .../src/query/tests/buildHooks.test.tsx | 4 +- .../src/query/tests/buildThunks.test.tsx | 78 +++++++++---------- .../src/query/tests/errorHandling.test.tsx | 6 +- packages/toolkit/src/query/tests/helpers.tsx | 4 +- .../toolkit/src/query/tests/matchers.test.tsx | 2 +- .../query/tests/optimisticUpdates.test.tsx | 2 +- yarn.lock | 34 -------- 9 files changed, 52 insertions(+), 93 deletions(-) diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index 3f8c371926..3a9d6718df 100644 --- 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 index 8b6d33eb98..d6b4811c77 100644 --- 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, 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 index 62aa269405..8654d2f134 100644 --- 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 index c591738d01..70fc0cab87 100644 --- 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,7 +90,7 @@ 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), @@ -99,32 +98,31 @@ describe('re-triggering behavior on arg change', () => { } ) - 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), @@ -132,26 +130,24 @@ describe('re-triggering behavior on arg change', () => { } ) - 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) } }) @@ -159,7 +155,7 @@ describe('re-triggering behavior on arg change', () => { 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), @@ -167,23 +163,22 @@ describe('re-triggering behavior on arg change', () => { } ) - 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), @@ -191,17 +186,16 @@ describe('re-triggering behavior on arg change', () => { } ) - 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 index 9ca81aca82..c19b507ed6 100644 --- 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 index c42b4f79e7..7cb75cca1d 100644 --- 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 index 71aa7deac4..8d01490b9b 100644 --- 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 index 961bfd77ce..65237090da 100644 --- 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 diff --git a/yarn.lock b/yarn.lock index 03b48023c5..4fdbfb5d62 100644 --- a/yarn.lock +++ b/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"