diff --git a/src/App.test.jsx b/src/App.test.jsx
new file mode 100644
index 0000000..de89c34
--- /dev/null
+++ b/src/App.test.jsx
@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+// 模拟 react-router-dom 的 useNavigate
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+  };
+});
+
+describe('App 组件', () => {
+  beforeEach(() => {
+    // 清除 localStorage
+    window.localStorage.clear();
+  });
+
+  it('应该渲染网站标题', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    
+    expect(screen.getByText('PT网站')).toBeInTheDocument();
+    expect(screen.getByText('欢迎来到PT网站')).toBeInTheDocument();
+  });
+
+  it('当用户未登录时应该显示游客角色', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    
+    expect(screen.getByText('(游客)')).toBeInTheDocument();
+  });
+
+  it('当用户是管理员时应该显示管理面板菜单', () => {
+    // 模拟管理员登录
+    window.localStorage.setItem('user', JSON.stringify({ 
+      username: 'admin', 
+      role: 'admin',
+      avatar: 'avatar-url' 
+    }));
+    
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    
+    expect(screen.getByText('管理面板')).toBeInTheDocument();
+    expect(screen.getByText('管理员专区')).toBeInTheDocument();
+  });
+
+  it('当用户是版主时应该显示版主专区', () => {
+    // 模拟版主登录
+    window.localStorage.setItem('user', JSON.stringify({ 
+      username: 'moderator', 
+      role: 'moderator',
+      avatar: 'avatar-url' 
+    }));
+    
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+    
+    expect(screen.getByText('版主专区')).toBeInTheDocument();
+  });
+});
\ No newline at end of file