diff --git a/app/src/components/App.test.js b/app/src/components/App.test.js
new file mode 100644
index 0000000..513b8f3
--- /dev/null
+++ b/app/src/components/App.test.js
@@ -0,0 +1,20 @@
+import {render, screen} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import App from './App'
+
+jest.mock('metamask-react', () => ({
+  useMetaMask: () => ({
+    status: 'unavailable',
+    chainId: null,
+    connect: jest.fn(),
+  }),
+}))
+
+test('renders bridge tabs and wallet connection guidance', () => {
+  render(<App/>)
+
+  expect(screen.getByRole('tab', {name: /BGL to WBGL/i})).toBeInTheDocument()
+  expect(screen.getByRole('tab', {name: /WBGL to BGL/i})).toBeInTheDocument()
+  expect(screen.getByText(/Please connect wallet/i)).toBeInTheDocument()
+  expect(screen.getByText(/Please install Metamask/i)).toBeInTheDocument()
+})