diff --git a/.changeset/many-ravens-cry.md b/.changeset/many-ravens-cry.md
index 494c5a8579..d4a4969d1a 100644
--- a/.changeset/many-ravens-cry.md
+++ b/.changeset/many-ravens-cry.md
@@ -3,3 +3,4 @@
---
-**chore**: Add testing to Transaction Toast. By @cpcramer #1023
+-**chore**: Add Connect Wallet tests and refactor to use Vitest. By @cpcramer #1036
diff --git a/src/wallet/components/ConnectWallet.test.tsx b/src/wallet/components/ConnectWallet.test.tsx
index fa5b111578..4d93eaebbf 100644
--- a/src/wallet/components/ConnectWallet.test.tsx
+++ b/src/wallet/components/ConnectWallet.test.tsx
@@ -1,9 +1,6 @@
import { fireEvent, render, screen } from '@testing-library/react';
-/**
- * @vitest-environment jsdom
- */
import type { ReactNode } from 'react';
-import '@testing-library/jest-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
import { useAccount, useConnect } from 'wagmi';
import { ConnectWallet } from './ConnectWallet';
import { useWalletContext } from './WalletProvider';
@@ -26,18 +23,27 @@ vi.mock('./WalletProvider', () => ({
),
}));
+vi.mock('@rainbow-me/rainbowkit', () => ({
+ ConnectButton: {
+ Custom: ({
+ children,
+ }: { children: (props: { openConnectModal: () => void }) => ReactNode }) =>
+ children({ openConnectModal: vi.fn() }),
+ },
+}));
+
describe('ConnectWallet', () => {
beforeEach(() => {
- (useAccount as vi.Mock).mockReturnValue({
+ vi.mocked(useAccount).mockReturnValue({
address: '',
status: 'disconnected',
});
- (useConnect as vi.Mock).mockReturnValue({
+ vi.mocked(useConnect).mockReturnValue({
connectors: [{ id: 'mockConnector' }],
connect: vi.fn(),
status: 'idle',
});
- (useWalletContext as vi.Mock).mockReturnValue({
+ vi.mocked(useWalletContext).mockReturnValue({
isOpen: false,
setIsOpen: vi.fn(),
});
@@ -52,12 +58,12 @@ describe('ConnectWallet', () => {
});
it('renders spinner when loading', () => {
- (useConnect as vi.Mock).mockReturnValue({
+ vi.mocked(useConnect).mockReturnValue({
connectors: [{ id: 'mockConnector' }],
connect: vi.fn(),
status: 'pending',
});
- (useAccount as vi.Mock).mockReturnValue({
+ vi.mocked(useAccount).mockReturnValue({
address: '',
status: 'connecting',
});
@@ -69,7 +75,7 @@ describe('ConnectWallet', () => {
});
it('renders children when connected', () => {
- (useAccount as vi.Mock).mockReturnValue({
+ vi.mocked(useAccount).mockReturnValue({
address: '0x123',
status: 'connected',
});
@@ -86,7 +92,7 @@ describe('ConnectWallet', () => {
it('calls connect function when connect button is clicked', () => {
const connectMock = vi.fn();
- (useConnect as vi.Mock).mockReturnValue({
+ vi.mocked(useConnect).mockReturnValue({
connectors: [{ id: 'mockConnector' }],
connect: connectMock,
status: 'idle',
@@ -104,11 +110,11 @@ describe('ConnectWallet', () => {
it('toggles wallet modal on button click when connected', () => {
const setIsOpenMock = vi.fn();
- (useAccount as vi.Mock).mockReturnValue({
+ vi.mocked(useAccount).mockReturnValue({
address: '0x123',
status: 'connected',
});
- (useWalletContext as vi.Mock).mockReturnValue({
+ vi.mocked(useWalletContext).mockReturnValue({
isOpen: false,
setIsOpen: setIsOpenMock,
});
@@ -126,15 +132,15 @@ describe('ConnectWallet', () => {
});
it('applies bg-ock-secondary-active class when isOpen is true', () => {
- (useWalletContext as vi.Mock).mockReturnValue({
+ vi.mocked(useWalletContext).mockReturnValue({
isOpen: true,
setIsOpen: vi.fn(),
});
- (useAccount as vi.Mock).mockReturnValue({
+ vi.mocked(useAccount).mockReturnValue({
address: '0x123',
status: 'connected',
});
- (useConnect as vi.Mock).mockReturnValue({
+ vi.mocked(useConnect).mockReturnValue({
connectors: [{ id: 'test-connector' }],
connect: vi.fn(),
status: 'idle',
@@ -149,4 +155,51 @@ describe('ConnectWallet', () => {
const button = screen.getByTestId('ockConnectWallet_Connected');
expect(button).toHaveClass('bg-ock-secondary-active');
});
+
+ describe('withWalletAggregator', () => {
+ beforeEach(() => {
+ vi.mocked(useAccount).mockReturnValue({
+ address: '',
+ status: 'disconnected',
+ });
+ vi.mocked(useConnect).mockReturnValue({
+ connectors: [{ id: 'mockConnector' }],
+ connect: vi.fn(),
+ status: 'idle',
+ });
+ });
+
+ it('renders ConnectButtonRainboKit when withWalletAggregator is true', () => {
+ render(
+ ,
+ );
+
+ const container = screen.getByTestId('ockConnectWallet_Container');
+ expect(container).toBeInTheDocument();
+
+ const connectButton = screen.getByTestId('ockConnectButton');
+ expect(connectButton).toBeInTheDocument();
+ expect(connectButton).toHaveTextContent('Connect Wallet');
+ });
+
+ it('renders regular ConnectButton when withWalletAggregator is false', () => {
+ const connectMock = vi.fn();
+ vi.mocked(useConnect).mockReturnValue({
+ connectors: [{ id: 'mockConnector' }],
+ connect: connectMock,
+ status: 'idle',
+ });
+
+ render(
+ ,
+ );
+
+ const connectButton = screen.getByTestId('ockConnectButton');
+ fireEvent.click(connectButton);
+
+ expect(connectMock).toHaveBeenCalledWith({
+ connector: { id: 'mockConnector' },
+ });
+ });
+ });
});