Fix post review

packages/extension/package.json

@@ -46,7 +46,6 @@
     "@rollup/plugin-inject": "^5.0.5",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chrome": "^0.0.258",
     "@types/crypto-js": "^4.2.1",

packages/extension/src/hooks/useBeforeUnload/useBeforeUnload.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useBeforeUnload } from './useBeforeUnload';
 import { vi, describe, it } from 'vitest';

packages/extension/src/hooks/useFees/useFees.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { SubmittableTransaction } from 'xrpl';
 
 import { useFees } from './useFees';
@@ -56,13 +56,9 @@ describe('useFees', () => {
   });
 
   it('should estimate fees correctly', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useFees(transaction, null));
+    const { result } = renderHook(() => useFees(transaction, null));
 
-    // Wait for effects to run and state to update
-    await waitForNextUpdate();
-
-    // Check the results
-    expect(result.current.estimatedFees).toEqual('12');
+    await waitFor(() => expect(result.current.estimatedFees).toEqual('12'));
   });
 
   it('useFees with a list of transactions', async () => {
@@ -99,54 +95,44 @@ describe('useFees', () => {
       }
     ];
 
-    const { result, waitForNextUpdate } = renderHook(() => useFees(transactions, null));
-
-    // Wait for effects to run and state to update
-    await waitForNextUpdate();
+    const { result } = renderHook(() => useFees(transactions, null));
 
     // Check the results
     // The first transaction has a Fee of 199 drops, and the second has an estimated fee of 12 drops
-    expect(result.current.estimatedFees).toEqual('211');
+    await waitFor(() => expect(result.current.estimatedFees).toEqual('211'));
   });
 
   describe('difference calculation', () => {
     it('should calculate difference correctly when a fee is provided', async () => {
-      const { result, waitForNextUpdate } = renderHook(() => useFees(transaction, '199'));
-
-      // Wait for effects to run and state to update
-      await waitForNextUpdate();
+      const { result } = renderHook(() => useFees(transaction, '199'));
 
       // Check the results
       // balance = 50, reserve = 20 + 2 * 2 = 24, fee = dropsToXrp(199) = 0.000199
       // So, difference = balance - reserve - fee = 50 - 24 - 0.000199 = 25.999801
-      expect(result.current.difference).toEqual(25.999801);
+      await waitFor(() => expect(result.current.difference).toEqual(25.999801));
     });
 
     it('should calculate difference correctly when balance is more than reserve + fees', async () => {
       // Set the balance to be more than reserve + fees
 
       mockGetXrpBalance = () => Promise.resolve(100);
 
-      const { result, waitForNextUpdate } = renderHook(() => useFees(transaction, null));
-
-      await waitForNextUpdate();
+      const { result } = renderHook(() => useFees(transaction, null));
 
       // balance = 100, reserve = 20 + 2 * 2 = 24, fee = 12 drops
       // So, difference = balance - reserve - fee = 100 - 24 - 0.000012 = 75.999988
-      expect(result.current.difference).toEqual(75.999988);
+      await waitFor(() => expect(result.current.difference).toEqual(75.999988));
     });
 
     it('should calculate difference correctly when balance is less than reserve + fees', async () => {
       // Set the balance to be less than reserve + fees
       mockGetXrpBalance = () => Promise.resolve(20);
 
-      const { result, waitForNextUpdate } = renderHook(() => useFees(transaction, null));
-
-      await waitForNextUpdate();
+      const { result } = renderHook(() => useFees(transaction, null));
 
       // balance = 20, reserve = 20 + 2 * 2 = 24, fee = 12 drops
       // So, difference = balance - reserve - fee = 20 - 24 - 0.000012 = -4.000012
-      expect(result.current.difference).toEqual(-4.000012);
+      await waitFor(() => expect(result.current.difference).toEqual(-4.000012));
     });
   });
 });

packages/extension/src/hooks/useFetchFromSessionStorage/useFetchFromSessionStorage.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { loadFromChromeSessionStorage } from '../../utils';
@@ -20,11 +20,8 @@ describe('useFetchFromSessionStorage', () => {
   it('fetches data from session storage', async () => {
     const key = 'test-key';
 
-    const { result, waitForNextUpdate } = renderHook(() => useFetchFromSessionStorage(key));
+    const { result } = renderHook(() => useFetchFromSessionStorage(key));
 
-    // Waiting for the async operation to complete
-    await waitForNextUpdate();
-
-    expect(result.current.fetchedData).toEqual({ data: 'test-data' });
+    await waitFor(() => expect(result.current.fetchedData).toEqual({ data: 'test-data' }));
   });
 });

packages/extension/src/hooks/useMainToken/useMainToken.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { Chain } from '@gemwallet/constants';
 
@@ -17,14 +17,14 @@ describe('useMainToken', () => {
   });
 
   it('returns XRP_TOKEN for default network', () => {
-    vi.mocked(contexts.useNetwork).mockReturnValue({ chainName: 'SomeChain' } as any);
+    vi.mocked(contexts.useNetwork).mockReturnValue({ chainName: 'SomeChain' } as unknown);
 
     const { result } = renderHook(() => useMainToken());
     expect(result.current).toBe(XRP_TOKEN);
   });
 
   it('returns XAH_TOKEN for XAHAU_TESTNET', () => {
-    vi.mocked(contexts.useNetwork).mockReturnValue({ chainName: Chain.XAHAU } as any);
+    vi.mocked(contexts.useNetwork).mockReturnValue({ chainName: Chain.XAHAU } as unknown);
 
     const { result } = renderHook(() => useMainToken());
     expect(result.current).toBe(XAH_TOKEN);

yarn.lock

@@ -1440,14 +1440,6 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@^8.0.1":
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
-  integrity sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    react-error-boundary "^3.1.0"
-
 "@testing-library/react@^14.1.2":
   version "14.1.2"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.1.2.tgz#a2b9e9ee87721ec9ed2d7cfc51cc04e474537c32"
@@ -7314,13 +7306,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-error-boundary@^3.1.0:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
-  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 react-icons@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"