diff --git a/src/components/AnnouncementDetail.test.jsx b/src/components/AnnouncementDetail.test.jsx
new file mode 100644
index 0000000..7f44ecd
--- /dev/null
+++ b/src/components/AnnouncementDetail.test.jsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes, useNavigate, useParams, useLocation } from 'react-router-dom';
+import AnnouncementDetail from './AnnouncementDetail';
+import * as announcementApi from '../api/announcement';
+
+// Mock API 模块
+jest.mock('../api/announcement');
+
+// Mock 路由钩子
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+  useParams: jest.fn(),
+  useLocation: jest.fn(),
+}));
+
+describe('AnnouncementDetail 组件', () => {
+  const mockAnnouncement = {
+    id: 1,
+    title: '测试公告标题',
+    content: '这是测试公告内容\n这是第二行内容',
+    
+    createTime: '2023-01-01T00:00:00Z',
+    
+  };
+
+  beforeEach(() => {
+    // 重置 mock 函数
+    mockNavigate.mockClear();
+    
+    // 设置模拟的 API 响应
+    announcementApi.getAnnouncementDetail.mockResolvedValue({
+      data: {
+        code: 200,
+        data: {
+          announcement: mockAnnouncement
+        }
+      }
+    });
+
+    // 模拟 useParams
+    useParams.mockReturnValue({ id: '1' });
+
+    // 模拟 useLocation
+    useLocation.mockReturnValue({
+      state: { fromTab: 'announcement' }
+    });
+  });
+
+  const renderComponent = () => {
+    return render(
+      <MemoryRouter initialEntries={['/announcement/1']}>
+        <Routes>
+          <Route path="/announcement/:id" element={<AnnouncementDetail />} />
+          {/* 添加一个模拟的公告列表路由用于导航测试 */}
+          <Route path="/dashboard/announcement" element={<div>公告列表</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+  };
+
+  it('应该正确加载和显示公告详情', async () => {
+    renderComponent();
+
+    
+
+    // 等待数据加载完成
+    await waitFor(() => {
+      expect(screen.getByText('测试公告标题')).toBeInTheDocument();
+      expect(screen.getByText('这是测试公告内容')).toBeInTheDocument();
+      expect(screen.getByText('这是第二行内容')).toBeInTheDocument();
+    });
+  });
+
+  it('应该处理公告加载失败的情况', async () => {
+    // 模拟 API 返回错误
+    announcementApi.getAnnouncementDetail.mockResolvedValue({
+      data: {
+        code: 404,
+        message: '公告不存在'
+      }
+    });
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('公告不存在')).toBeInTheDocument();
+    });
+  });
+
+  it('应该能够返回公告区', async () => {
+    renderComponent();
+  
+    await waitFor(() => {
+      expect(screen.getByText('测试公告标题')).toBeInTheDocument();
+    });
+  
+    fireEvent.click(screen.getByRole('button', { name: /返回/i }));
+  
+    // 检查是否导航回公告区
+    expect(mockNavigate).toHaveBeenCalledWith('/dashboard/announcement');
+  });
+
+  it('应该显示加载错误时的UI', async () => {
+    // 模拟 API 抛出错误
+    announcementApi.getAnnouncementDetail.mockRejectedValue(new Error('网络错误'));
+
+    renderComponent();
+
+    await waitFor(() => {
+      expect(screen.getByText('获取公告详情失败')).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file