From e2097c1bc13550946776ef65b7f1ad219a1aae9e Mon Sep 17 00:00:00 2001 From: Afonso Jorge Ramos Date: Wed, 6 Dec 2023 18:02:17 +0000 Subject: [PATCH] deps: replace `@testing-library/react-hooks` for `@testing-library/react` --- package.json | 1 - pnpm-lock.yaml | 37 ------- src/hooks/useNotifications.test.ts | 171 +++++++++++++---------------- 3 files changed, 77 insertions(+), 132 deletions(-) diff --git a/package.json b/package.json index 66147467b..ab7a0fc5e 100644 --- a/package.json +++ b/package.json @@ -113,7 +113,6 @@ }, "devDependencies": { "@testing-library/react": "14.0.0", - "@testing-library/react-hooks": "8.0.1", "@types/jest": "29.5.10", "@types/node": "18.18.0", "@types/react": "18.2.42", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7b283ce5..1eb4d52ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,9 +58,6 @@ devDependencies: '@testing-library/react': specifier: 14.0.0 version: 14.0.0(react-dom@18.2.0)(react@18.2.0) - '@testing-library/react-hooks': - specifier: 8.0.1 - version: 8.0.1(@types/react@18.2.42)(react-dom@18.2.0)(react-test-renderer@18.2.0)(react@18.2.0) '@types/jest': specifier: 29.5.10 version: 29.5.10 @@ -941,30 +938,6 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/react-hooks@8.0.1(@types/react@18.2.42)(react-dom@18.2.0)(react-test-renderer@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==} - engines: {node: '>=12'} - 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 - dependencies: - '@babel/runtime': 7.21.5 - '@types/react': 18.2.42 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-error-boundary: 3.1.4(react@18.2.0) - react-test-renderer: 18.2.0(react@18.2.0) - dev: true - /@testing-library/react@14.0.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==} engines: {node: '>=14'} @@ -4684,16 +4657,6 @@ packages: react: 18.2.0 scheduler: 0.23.0 - /react-error-boundary@3.1.4(react@18.2.0): - resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==} - engines: {node: '>=10', npm: '>=6'} - peerDependencies: - react: '>=16.13.1' - dependencies: - '@babel/runtime': 7.21.5 - react: 18.2.0 - dev: true - /react-final-form@6.5.9(final-form@4.20.10)(react@18.2.0): resolution: {integrity: sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==} peerDependencies: diff --git a/src/hooks/useNotifications.test.ts b/src/hooks/useNotifications.test.ts index dce5e9e18..66e40f26a 100644 --- a/src/hooks/useNotifications.test.ts +++ b/src/hooks/useNotifications.test.ts @@ -1,11 +1,11 @@ +import { act, renderHook, waitFor } from '@testing-library/react'; import axios from 'axios'; import nock from 'nock'; -import { act, renderHook } from '@testing-library/react-hooks'; import { mockAccounts, mockSettings } from '../__mocks__/mock-state'; -import { useNotifications } from './useNotifications'; -import { AuthState } from '../types'; import { mockedUser } from '../__mocks__/mockedData'; +import { AuthState } from '../types'; +import { useNotifications } from './useNotifications'; describe('hooks/useNotifications.ts', () => { beforeEach(() => { @@ -30,9 +30,7 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(200, notifications); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(mockAccounts, mockSettings); @@ -40,9 +38,10 @@ describe('hooks/useNotifications.ts', () => { expect(result.current.isFetching).toBe(true); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); - expect(result.current.isFetching).toBe(false); expect(result.current.notifications[0].hostname).toBe( 'github.gitify.io', ); @@ -60,9 +59,7 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(400, { message }); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(mockAccounts, mockSettings); @@ -70,9 +67,10 @@ describe('hooks/useNotifications.ts', () => { expect(result.current.isFetching).toBe(true); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); - expect(result.current.isFetching).toBe(false); expect(result.current.requestFailed).toBe(true); }); }); @@ -93,19 +91,18 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(200, notifications); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(accounts, mockSettings); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.notifications[0].hostname).toBe( + 'github.gitify.io', + ); + }); - expect(result.current.notifications[0].hostname).toBe( - 'github.gitify.io', - ); expect(result.current.notifications[0].notifications.length).toBe(2); }); @@ -119,17 +116,15 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(400, { message: 'Oops! Something went wrong.' }); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(accounts, mockSettings); }); - await waitForNextUpdate(); - - expect(result.current.requestFailed).toBe(true); + await waitFor(() => { + expect(result.current.requestFailed).toBe(true); + }); }); }); @@ -150,17 +145,16 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(200, notifications); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(accounts, mockSettings); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.notifications[0].hostname).toBe('github.com'); + }); - expect(result.current.notifications[0].hostname).toBe('github.com'); expect(result.current.notifications[0].notifications.length).toBe(2); }); @@ -174,17 +168,15 @@ describe('hooks/useNotifications.ts', () => { .get('/notifications?participating=false') .reply(400, { message: 'Oops! Something went wrong.' }); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.fetchNotifications(accounts, mockSettings); }); - await waitForNextUpdate(); - - expect(result.current.requestFailed).toBe(true); + await waitFor(() => { + expect(result.current.requestFailed).toBe(true); + }); }); }); @@ -242,9 +234,7 @@ describe('hooks/useNotifications.ts', () => { .get('/5') .reply(200, { state: 'open', draft: true }); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(true), - ); + const { result } = renderHook(() => useNotifications(true)); act(() => { result.current.fetchNotifications(accounts, { @@ -255,9 +245,10 @@ describe('hooks/useNotifications.ts', () => { expect(result.current.isFetching).toBe(true); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.notifications[0].hostname).toBe('github.com'); + }); - expect(result.current.notifications[0].hostname).toBe('github.com'); expect(result.current.notifications[0].notifications.length).toBe(5); expect( result.current.notifications[0].notifications[0].subject.state, @@ -290,15 +281,15 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(200); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markNotification(accounts, id, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -308,15 +299,15 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(400); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markNotification(accounts, id, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -331,15 +322,15 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(200); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markNotification(accounts, id, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -349,15 +340,15 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(400); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markNotification(accounts, id, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -382,16 +373,14 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(200); - const { result, waitForValueToChange } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.unsubscribeNotification(accounts, id, hostname); }); - await waitForValueToChange(() => { - return result.current.isFetching; + await waitFor(() => { + expect(result.current.isFetching).toBe(false); }); expect(result.current.notifications.length).toBe(0); @@ -408,16 +397,14 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(400); - const { result, waitForValueToChange } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.unsubscribeNotification(accounts, id, hostname); }); - await waitForValueToChange(() => { - return result.current.isFetching; + await waitFor(() => { + expect(result.current.isFetching).toBe(false); }); expect(result.current.notifications.length).toBe(0); @@ -439,16 +426,14 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(200); - const { result, waitForValueToChange } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.unsubscribeNotification(accounts, id, hostname); }); - await waitForValueToChange(() => { - return result.current.isFetching; + await waitFor(() => { + expect(result.current.isFetching).toBe(false); }); expect(result.current.notifications.length).toBe(0); @@ -465,16 +450,14 @@ describe('hooks/useNotifications.ts', () => { .patch(`/notifications/threads/${id}`) .reply(400); - const { result, waitForValueToChange } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.unsubscribeNotification(accounts, id, hostname); }); - await waitForValueToChange(() => { - return result.current.isFetching; + await waitFor(() => { + expect(result.current.isFetching).toBe(false); }); expect(result.current.notifications.length).toBe(0); @@ -494,15 +477,15 @@ describe('hooks/useNotifications.ts', () => { .put(`/repos/${repoSlug}/notifications`) .reply(200); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markRepoNotifications(accounts, repoSlug, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -512,15 +495,15 @@ describe('hooks/useNotifications.ts', () => { .put(`/repos/${repoSlug}/notifications`) .reply(400); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markRepoNotifications(accounts, repoSlug, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -535,15 +518,15 @@ describe('hooks/useNotifications.ts', () => { .put(`/repos/${repoSlug}/notifications`) .reply(200); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markRepoNotifications(accounts, repoSlug, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); }); @@ -553,15 +536,15 @@ describe('hooks/useNotifications.ts', () => { .put(`/repos/${repoSlug}/notifications`) .reply(400); - const { result, waitForNextUpdate } = renderHook(() => - useNotifications(false), - ); + const { result } = renderHook(() => useNotifications(false)); act(() => { result.current.markRepoNotifications(accounts, repoSlug, hostname); }); - await waitForNextUpdate(); + await waitFor(() => { + expect(result.current.isFetching).toBe(false); + }); expect(result.current.notifications.length).toBe(0); });