diff --git a/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx b/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx
new file mode 100644
index 000000000..d65ee3269
--- /dev/null
+++ b/frontend/src/components/ConsumerGroups/__test__/List.spec.tsx
@@ -0,0 +1,54 @@
+import { screen } from '@testing-library/react';
+import { render } from 'lib/testHelpers';
+import { useConsumerGroups } from 'lib/hooks/api/consumers';
+import List from '../List';
+
+// Mock hooks
+jest.mock('lib/hooks/api/consumers', () => ({
+  useConsumerGroups: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useSearchParams: () => [new URLSearchParams(), jest.fn()],
+  useNavigate: () => jest.fn(),
+}));
+
+const mockUseConsumerGroups = useConsumerGroups as jest.Mock;
+
+describe('ConsumerGroups List', () => {
+  beforeEach(() => {
+    mockUseConsumerGroups.mockImplementation(() => ({
+      data: {
+        consumerGroups: [
+          {
+            groupId: 'group1',
+            consumerLag: 0,
+            members: 1,
+            topics: 1,
+            coordinator: { id: 1 },
+            state: 'STABLE',
+          },
+          {
+            groupId: 'group2',
+            consumerLag: null,
+            members: 1,
+            topics: 1,
+            coordinator: { id: 2 },
+            state: 'STABLE',
+          },
+        ],
+        pageCount: 1,
+      },
+      isSuccess: true,
+      isFetching: false,
+    }));
+  });
+
+  it('renders consumer lag values correctly', () => {
+    render(<List />);
+    const tableRows = screen.getAllByRole('row');
+    expect(tableRows[1]).toHaveTextContent('0');
+    expect(tableRows[2]).toHaveTextContent('N/A');
+  });
+});