fix(@interchain-kit/react): fix warning when test

Author: theothersideofgods

packages/react/__tests__/hooks/useAsync.test.ts

@@ -8,17 +8,19 @@ describe('useAsync', () => {
     });
     afterEach(cleanup)
 
-    it('should return initial state', () => {
+    it('should return initial state', async () => {
         const { result } = renderHook(() =>
             useAsync({
                 queryKey: 'test1',
                 queryFn: async () => 'data',
             })
         );
+        await waitFor(() => {
+            expect(result.current.data).toBeNull();
+            expect(result.current.isLoading).toBe(true);
+            expect(result.current.error).toBeNull();
+        })
 
-        expect(result.current.data).toBeNull();
-        expect(result.current.isLoading).toBe(true);
-        expect(result.current.error).toBeNull();
     });
 
     it('should fetch data and update state', async () => {

packages/react/__tests__/hooks/useChain.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { renderHook, act } from '@testing-library/react';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { useChain } from '../../src/hooks/useChain';
 import { useWalletManager } from '../../src/hooks/useWalletManager';
 import { useWalletModal } from '../../src/modal';
@@ -75,7 +75,7 @@ describe('useChain', () => {
     }).toThrow(new ChainNameNotExist('non-existent-chain'));
   });
 
-  it('should return correct values for an existing chain', () => {
+  it('should return correct values for an existing chain', async () => {
 
     const mockChainWalletState: ChainWalletState = {
       walletState: WalletState.Connected,
@@ -92,25 +92,31 @@ describe('useChain', () => {
 
     const { result } = renderHook(() => useChain('test-chain'));
 
-    expect(result.current.chain).toEqual(mockChain);
-    expect(result.current.status).toBe(WalletState.Connected);
-    expect(result.current.username).toBe('test-user');
-    expect(result.current.address).toBe('test-address');
-    expect(result.current.rpcEndpoint).toBe('http://localhost:26657');
+    await waitFor(() => {
+      expect(result.current.chain).toEqual(mockChain);
+      expect(result.current.status).toBe(WalletState.Connected);
+      expect(result.current.username).toBe('test-user');
+      expect(result.current.address).toBe('test-address');
+      expect(result.current.rpcEndpoint).toBe('http://localhost:26657');
+    })
+
+
   });
 
-  it('should call connect and open modal when connect is invoked', () => {
+  it('should call connect and open modal when connect is invoked', async () => {
 
     mockWalletManager.getChainByName.mockReturnValue(mockChain);
 
     const { result } = renderHook(() => useChain('test-chain'));
 
-    act(() => {
+    await act(() => {
       result.current.connect();
     });
 
-    expect(mockWalletManager.setCurrentChainName).toHaveBeenCalledWith('test-chain');
-    expect(mockWalletModal.open).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(mockWalletManager.setCurrentChainName).toHaveBeenCalledWith('test-chain');
+      expect(mockWalletModal.open).toHaveBeenCalled();
+    })
   });
 
   it('should call disconnect when disconnect is invoked', async () => {
@@ -123,33 +129,42 @@ describe('useChain', () => {
       await result.current.disconnect();
     });
 
-    expect(mockWalletManager.disconnect).toHaveBeenCalledWith('test-wallet', 'test-chain');
+    await waitFor(() => {
+
+      expect(mockWalletManager.disconnect).toHaveBeenCalledWith('test-wallet', 'test-chain');
+    })
+
   });
 
-  it('should call open modal when openView is invoked', () => {
+  it('should call open modal when openView is invoked', async () => {
 
     mockWalletManager.getChainByName.mockReturnValue(mockChain);
 
     const { result } = renderHook(() => useChain('test-chain'));
 
-    act(() => {
+    await act(() => {
       result.current.openView();
     });
 
-    expect(mockWalletManager.setCurrentChainName).toHaveBeenCalledWith('test-chain');
-    expect(mockWalletModal.open).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(mockWalletManager.setCurrentChainName).toHaveBeenCalledWith('test-chain');
+      expect(mockWalletModal.open).toHaveBeenCalled();
+    })
+
   });
 
-  it('should call close modal when closeView is invoked', () => {
+  it('should call close modal when closeView is invoked', async () => {
 
     mockWalletManager.getChainByName.mockReturnValue(mockChain);
 
     const { result } = renderHook(() => useChain('test-chain'));
 
-    act(() => {
+    await act(() => {
       result.current.closeView();
     });
 
-    expect(mockWalletModal.close).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(mockWalletModal.close).toHaveBeenCalled();
+    })
   });
 });

packages/react/__tests__/hooks/useChainWallet.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { renderHook } from "@testing-library/react"
+import { act, renderHook, waitFor } from "@testing-library/react"
 import { useChainWallet } from "../../src/hooks/useChainWallet"
 import { useWalletManager } from "../../src/hooks/useWalletManager"
 import { ChainWallet } from "../../src/store/chain-wallet"
@@ -61,7 +61,7 @@ describe("useChainWallet", () => {
             ; (useWalletManager as jest.Mock).mockReturnValue(mockWalletManager)
     })
 
-    it("should return the correct chain and wallet data", () => {
+    it("should return the correct chain and wallet data", async () => {
         const chainName = "test-chain"
         const walletName = "test-wallet"
 
@@ -83,26 +83,32 @@ describe("useChainWallet", () => {
 
         const { result } = renderHook(() => useChainWallet(chainName, walletName))
 
-        expect(result.current.chain).toEqual(mockChain)
-        expect(result.current.wallet).toBeInstanceOf(ChainWallet)
-        expect(result.current.assetList).toEqual(mockWalletManager.assetLists[0])
-        expect(result.current.status).toBe(WalletState.Connected)
-        expect(result.current.username).toBe("test-user")
-        expect(result.current.address).toBe("test-address")
-        expect(result.current.message).toBe("")
-        expect(result.current.rpcEndpoint).toBe("http://localhost:26657")
-        expect(result.current.logoUrl).toBe("http://logo.url")
+        await waitFor(() => {
+            expect(result.current.chain).toEqual(mockChain)
+            expect(result.current.wallet).toBeInstanceOf(ChainWallet)
+            expect(result.current.assetList).toEqual(mockWalletManager.assetLists[0])
+            expect(result.current.status).toBe(WalletState.Connected)
+            expect(result.current.username).toBe("test-user")
+            expect(result.current.address).toBe("test-address")
+            expect(result.current.message).toBe("")
+            expect(result.current.rpcEndpoint).toBe("http://localhost:26657")
+            expect(result.current.logoUrl).toBe("http://logo.url")
+        })
     })
 
-    it("should call disconnect when disconnect is invoked", () => {
+    it("should call disconnect when disconnect is invoked", async () => {
         const chainName = "test-chain"
         const walletName = "test-wallet"
 
         const { result } = renderHook(() => useChainWallet(chainName, walletName))
 
         result.current.disconnect()
 
-        expect(mockWalletManager.disconnect).toHaveBeenCalledWith(walletName, chainName)
+        await waitFor(() => {
+            expect(mockWalletManager.disconnect).toHaveBeenCalledWith(walletName, chainName)
+        })
+
+
     })
 
     it("should return the correct RPC endpoint", async () => {
@@ -115,10 +121,12 @@ describe("useChainWallet", () => {
 
         const endpointResult = await result.current.getRpcEndpoint()
 
-        expect(endpointResult).toBe("http://localhost:26657")
+        await waitFor(() => {
+            expect(endpointResult).toBe("http://localhost:26657")
+        })
     })
 
-    it("should return the signing client", () => {
+    it("should return the signing client", async () => {
         const chainName = "test-chain"
         const walletName = "test-wallet"
 
@@ -129,6 +137,8 @@ describe("useChainWallet", () => {
 
         const { result } = renderHook(() => useChainWallet(chainName, walletName))
 
-        expect(result.current.getSigningClient()).toBe(mockSigningClient)
+        await waitFor(() => {
+            expect(result.current.getSigningClient()).toBe(mockSigningClient)
+        })
     })
 })

packages/react/__tests__/modal/provider.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import React, { act } from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { WalletModalProvider, useWalletModal } from "../../src/modal/provider";
 import "@testing-library/jest-dom";
 import { ChainProvider } from "../../src/provider";
@@ -18,7 +18,7 @@ const TestComponent = () => {
 };
 
 describe("WalletModalProvider", () => {
-  it("should render children correctly", () => {
+  it("should render children correctly", async () => {
     render(
       <ChainProvider chains={[chain]} assetLists={[assetList]} wallets={[]}>
         <WalletModalProvider>
@@ -27,17 +27,21 @@ describe("WalletModalProvider", () => {
       </ChainProvider>
     );
 
-    expect(screen.getByText("Test Child")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Test Child")).toBeInTheDocument();
+    });
   });
 
-  it("should open and close the modal", () => {
-    render(
-      <ChainProvider chains={[chain]} assetLists={[assetList]} wallets={[]}>
-        <WalletModalProvider>
-          <TestComponent />
-        </WalletModalProvider>
-      </ChainProvider>
-    );
+  it("should open and close the modal", async () => {
+    await act(async () => {
+      render(
+        <ChainProvider chains={[chain]} assetLists={[assetList]} wallets={[]}>
+          <WalletModalProvider>
+            <TestComponent />
+          </WalletModalProvider>
+        </ChainProvider>
+      );
+    });
 
     const openButton = screen.getByText("Open Modal");
     const closeButton = screen.getByText("Close Modal");