diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts
index b3b8061422..c9441402d9 100644
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -1,5 +1,20 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable object-shorthand */
+/* eslint-disable func-names */
+
 /**
  * Adds custom matchers from the react testing library to all tests
  */
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
+
+// Mock window.matchMedia
+window.matchMedia =
+	window.matchMedia ||
+	function (): any {
+		return {
+			matches: false,
+			addListener: function () {},
+			removeListener: function () {},
+		};
+	};
diff --git a/frontend/src/container/MetricsTable/Metrics.test.tsx b/frontend/src/container/MetricsTable/Metrics.test.tsx
new file mode 100644
index 0000000000..b81a9533b7
--- /dev/null
+++ b/frontend/src/container/MetricsTable/Metrics.test.tsx
@@ -0,0 +1,70 @@
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import {
+	combineReducers,
+	legacy_createStore as createStore,
+	Store,
+} from 'redux';
+
+import { InitialValue } from '../../store/reducers/metric';
+import Metrics from './index';
+
+const rootReducer = combineReducers({
+	metrics: (state = InitialValue) => state,
+});
+
+const mockStore = createStore(rootReducer);
+
+const renderWithReduxAndRouter = (mockStore: Store) => (
+	component: React.ReactElement,
+): RenderResult =>
+	render(
+		<BrowserRouter>
+			<Provider store={mockStore}>{component}</Provider>
+		</BrowserRouter>,
+	);
+
+describe('Metrics Component', () => {
+	it('renders without errors', async () => {
+		renderWithReduxAndRouter(mockStore)(<Metrics />);
+
+		await waitFor(() => {
+			expect(screen.getByText(/application/i)).toBeInTheDocument();
+			expect(screen.getByText(/p99 latency \(in ms\)/i)).toBeInTheDocument();
+			expect(screen.getByText(/error rate \(% of total\)/i)).toBeInTheDocument();
+			expect(screen.getByText(/operations per second/i)).toBeInTheDocument();
+		});
+	});
+
+	it('renders loading when required conditions are met', async () => {
+		const customStore = createStore(rootReducer, {
+			metrics: {
+				services: [],
+				loading: true,
+				error: false,
+			},
+		});
+
+		const { container } = renderWithReduxAndRouter(customStore)(<Metrics />);
+
+		const spinner = container.querySelector('.ant-spin-nested-loading');
+
+		expect(spinner).toBeInTheDocument();
+	});
+
+	it('renders no data when required conditions are met', async () => {
+		const customStore = createStore(rootReducer, {
+			metrics: {
+				services: [],
+				loading: false,
+				error: false,
+			},
+		});
+
+		renderWithReduxAndRouter(customStore)(<Metrics />);
+
+		expect(screen.getByText('No data')).toBeInTheDocument();
+	});
+});
diff --git a/frontend/src/store/reducers/metric.ts b/frontend/src/store/reducers/metric.ts
index 08e9ceebae..103244cc96 100644
--- a/frontend/src/store/reducers/metric.ts
+++ b/frontend/src/store/reducers/metric.ts
@@ -10,7 +10,7 @@ import {
 } from 'types/actions/metrics';
 import InitialValueTypes from 'types/reducer/metrics';
 
-const InitialValue: InitialValueTypes = {
+export const InitialValue: InitialValueTypes = {
 	error: false,
 	errorMessage: '',
 	loading: true,