diff --git a/src/transaction/components/Transaction.test.tsx b/src/transaction/components/Transaction.test.tsx index 9d4b48cba..0fd929512 100644 --- a/src/transaction/components/Transaction.test.tsx +++ b/src/transaction/components/Transaction.test.tsx @@ -1,23 +1,45 @@ import { render, screen } from '@testing-library/react'; -import { describe, expect, it, vi } from 'vitest'; +import { base, baseSepolia } from 'viem/chains'; +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { useOnchainKit } from '../../useOnchainKit'; import { Transaction } from './Transaction'; import { TransactionProvider } from './TransactionProvider'; +function mock(func: T) { + return func as vi.Mock; +} + vi.mock('./TransactionProvider', () => ({ - TransactionProvider: vi.fn(({ children }: { children: React.ReactNode }) => ( -
{children}
- )), + TransactionProvider: vi.fn( + ({ chainId, children }: { chainId: number; children: React.ReactNode }) => ( +
+
{children}
+
{`chainId: ${chainId}`}
+
+ ), + ), +})); + +vi.mock('../../useOnchainKit', () => ({ + useOnchainKit: vi.fn(), })); +const useOnchainKitMock = mock(useOnchainKit); + describe('Transaction', () => { beforeEach(() => { + useOnchainKitMock.mockReturnValue({ + chain: baseSepolia, + }); + }); + + afterEach(() => { vi.clearAllMocks(); }); - it('should renders the children inside the TransactionProvider', () => { + it('should render the children inside the TransactionProvider', () => { render( { expect(screen.getByText('Test Child')).toBeInTheDocument(); }); - it('should applies the correct className', () => { + it('should apply the correct className', () => { render( { const onSuccess = vi.fn(); render( { // Checking if the TransactionProvider is called expect(TransactionProvider).toHaveBeenCalledTimes(1); }); + + it('should use the chainId from the context if not provided', () => { + render( + +
Test Child
+
, + ); + expect(screen.getByText(`chainId: ${baseSepolia.id}`)).toBeInTheDocument(); + }); + + it('should use the provided chainId if provided', () => { + render( + +
Test Child
+
, + ); + expect(screen.getByText(`chainId: ${base.id}`)).toBeInTheDocument(); + }); }); diff --git a/src/transaction/components/Transaction.tsx b/src/transaction/components/Transaction.tsx index 65ac3d69a..c14b284bd 100644 --- a/src/transaction/components/Transaction.tsx +++ b/src/transaction/components/Transaction.tsx @@ -1,5 +1,6 @@ import { cn } from '../../styles/theme'; import { useIsMounted } from '../../useIsMounted'; +import { useOnchainKit } from '../../useOnchainKit'; import type { TransactionReact } from '../types'; import { TransactionProvider } from './TransactionProvider'; @@ -19,12 +20,16 @@ export function Transaction({ if (!isMounted) { return null; } + const { chain } = useOnchainKit(); + // If chainId is not provided, + // use the default chainId from the OnchainKit context + const accountChainId = chainId ? chainId : chain.id; return ( void; // An optional callback function that handles errors within the provider.