diff --git a/components/bank/components/__tests__/tokenList.test.tsx b/components/bank/components/__tests__/tokenList.test.tsx
index 9e33b14b..c1ec4324 100644
--- a/components/bank/components/__tests__/tokenList.test.tsx
+++ b/components/bank/components/__tests__/tokenList.test.tsx
@@ -1,9 +1,18 @@
-import { test, expect, afterEach, describe } from 'bun:test';
+import { test, expect, afterEach, describe, mock, jest } from 'bun:test';
import React from 'react';
import matchers from '@testing-library/jest-dom/matchers';
-import { fireEvent, render, screen, cleanup, within, waitFor } from '@testing-library/react';
+import { fireEvent, screen, cleanup, within, waitFor } from '@testing-library/react';
import TokenList from '@/components/bank/components/tokenList';
import { CombinedBalanceInfo } from '@/utils/types';
+import { renderWithChainProvider } from '@/tests/render';
+
+// Mock next/router
+mock.module('next/router', () => ({
+ useRouter: jest.fn().mockReturnValue({
+ query: {},
+ push: jest.fn(),
+ }),
+}));
const mockBalances: CombinedBalanceInfo[] = [
{
@@ -52,22 +61,22 @@ describe('TokenList', () => {
});
test('renders correctly', () => {
- render();
+ renderWithChainProvider();
expect(screen.getByText('Your Assets')).toBeInTheDocument();
});
test('displays loading skeleton when isLoading is true', () => {
- render();
+ renderWithChainProvider();
expect(screen.getByLabelText('skeleton-loader')).toBeInTheDocument();
});
test('displays empty state when there are no balances', () => {
- render();
+ renderWithChainProvider();
expect(screen.getByText('No tokens found!')).toBeInTheDocument();
});
test('filters balances based on search term', () => {
- render();
+ renderWithChainProvider();
const searchInput = screen.getByPlaceholderText('Search for a token...');
fireEvent.change(searchInput, { target: { value: 'Token 1' } });
@@ -76,9 +85,9 @@ describe('TokenList', () => {
});
test('opens modal with correct denomination information', async () => {
- render();
+ renderWithChainProvider();
const token1Container = screen.getByLabelText('utoken1');
- const button = within(token1Container).getByRole('button');
+ const button = within(token1Container).getByLabelText('info-utoken1');
fireEvent.click(button);
await waitFor(() => {
@@ -90,13 +99,13 @@ describe('TokenList', () => {
});
test('displays correct balance for each token', () => {
- render();
- expect(screen.getByText('0.001 TOKEN 1')).toBeInTheDocument();
- expect(screen.getByText('0.002 TOKEN 2')).toBeInTheDocument();
+ renderWithChainProvider();
+ expect(screen.getByText('0.001')).toBeInTheDocument();
+ expect(screen.getByText('0.002')).toBeInTheDocument();
});
test('displays correct base denomination for each token', () => {
- render();
+ renderWithChainProvider();
expect(screen.getByText('utoken1')).toBeInTheDocument();
expect(screen.getByText('utoken2')).toBeInTheDocument();
});
diff --git a/components/bank/components/tokenList.tsx b/components/bank/components/tokenList.tsx
index 1be86418..86107519 100644
--- a/components/bank/components/tokenList.tsx
+++ b/components/bank/components/tokenList.tsx
@@ -125,7 +125,7 @@ export default function TokenList({
{isLoading ? (
-
+
{[...Array(pageSize)].map((_, i) => (