diff --git a/src/routes/PermissionRoute.test.jsx b/src/routes/PermissionRoute.test.jsx
new file mode 100644
index 0000000..fc77107
--- /dev/null
+++ b/src/routes/PermissionRoute.test.jsx
@@ -0,0 +1,51 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import PermissionRoute from './PermissionRoute';
+
+// 模拟 Navigate 组件
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    Navigate: () => <div data-testid="navigate-mock">重定向到未授权页面</div>,
+  };
+});
+
+describe('PermissionRoute 组件', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('用户没有所需角色时应该重定向', () => {
+    // 模拟普通用户
+    window.localStorage.setItem('user', JSON.stringify({ role: 'user' }));
+    
+    render(
+      <MemoryRouter>
+        <PermissionRoute requiredRoles={['admin']}>
+          <div>管理员内容</div>
+        </PermissionRoute>
+      </MemoryRouter>
+    );
+    
+    // 应该看到重定向组件
+    expect(screen.getByTestId('navigate-mock')).toBeInTheDocument();
+  });
+
+  it('用户有所需角色时应该显示子组件', () => {
+    // 模拟管理员
+    window.localStorage.setItem('user', JSON.stringify({ role: 'admin' }));
+    
+    render(
+      <MemoryRouter>
+        <PermissionRoute requiredRoles={['admin']}>
+          <div>管理员内容</div>
+        </PermissionRoute>
+      </MemoryRouter>
+    );
+    
+    // 应该看到管理员内容
+    expect(screen.getByText('管理员内容')).toBeInTheDocument();
+  });
+});
\ No newline at end of file