lanyuanxiaoyao
4caf502908
- 引入 React Router v7 (Declarative mode) 实现 SPA 路由 - 重构 Layout 为 Header + 侧边栏 + 内容区的企业 Admin 布局 - 新增侧边栏菜单组件，支持折叠/展开，状态持久化到 localStorage - 新增示例页面：仪表盘、用户管理、系统设置、404 - 菜单配置与路由统一为单一数据源 (menu.tsx) - Vite code splitting 新增 vendor-router 组 - 更新 DEVELOPMENT.md 和 README.md 文档
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { render } from "@testing-library/react";
|
|
import { mock } from "bun:test";
|
|
import { createElement, StrictMode } from "react";
|
|
import { MemoryRouter } from "react-router";
|
|
|
|
import { ErrorBoundary } from "../../src/web/components/ErrorBoundary";
|
|
|
|
// Mock recharts BEFORE any component imports
|
|
void mock.module("recharts", () => ({
|
|
Area: () => null,
|
|
CartesianGrid: () => null,
|
|
Line: () => null,
|
|
LineChart: ({ children }: { children: unknown }) => children,
|
|
ResponsiveContainer: ({ children }: { children: unknown }) => children,
|
|
Tooltip: () => null,
|
|
XAxis: () => null,
|
|
YAxis: () => null,
|
|
}));
|
|
|
|
export interface RenderWithProvidersOptions {
|
|
initialRoute?: string;
|
|
}
|
|
|
|
export function renderWithProviders(ui: React.ReactElement, options?: RenderWithProvidersOptions) {
|
|
const queryClient = createTestQueryClient();
|
|
const initialRoute = options?.initialRoute ?? "/";
|
|
|
|
return render(
|
|
createElement(
|
|
StrictMode,
|
|
null,
|
|
createElement(
|
|
ErrorBoundary,
|
|
null,
|
|
createElement(
|
|
QueryClientProvider,
|
|
{ client: queryClient },
|
|
createElement(MemoryRouter, { initialEntries: [initialRoute] }, ui),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
function createTestQueryClient() {
|
|
return new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
staleTime: 0,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
// Custom test helpers (替代 jest-dom matchers)
|
|
export const testHelpers = {
|
|
toBeInTheDocument: (element: Element | null) => {
|
|
const pass = element !== null && document.contains(element);
|
|
return {
|
|
message: () => (pass ? "Expected element not to be in document" : "Expected element to be in document"),
|
|
pass,
|
|
};
|
|
},
|
|
toHaveAttribute: (element: Element | null, attr: string, value?: string) => {
|
|
const pass = value === undefined ? (element?.hasAttribute(attr) ?? false) : element?.getAttribute(attr) === value;
|
|
return {
|
|
message: () =>
|
|
pass ? `Expected element not to have attribute "${attr}"` : `Expected element to have attribute "${attr}"`,
|
|
pass,
|
|
};
|
|
},
|
|
toHaveClass: (element: Element | null, className: string) => {
|
|
const pass = element?.classList.contains(className) ?? false;
|
|
return {
|
|
message: () =>
|
|
pass ? `Expected element not to have class "${className}"` : `Expected element to have class "${className}"`,
|
|
pass,
|
|
};
|
|
},
|
|
toHaveTextContent: (element: Element | null, text: RegExp | string) => {
|
|
const content = element?.textContent ?? "";
|
|
const pass = element !== null && (typeof text === "string" ? content.includes(text) : text.test(content));
|
|
return {
|
|
message: () => (pass ? `Expected element not to have text "${text}"` : `Expected element to have text "${text}"`),
|
|
pass,
|
|
};
|
|
},
|
|
};
|