52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { ReactElement } from 'react';
|
|
import { render as rtlRender, type RenderOptions } from '@testing-library/react';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import { SettingsProvider } from '../src/hooks/SettingsProvider';
|
|
|
|
/**
|
|
* Standardized render utility for frontend tests to ensure all necessary
|
|
* providers (TanStack Query, Settings, Router, etc.) are present.
|
|
*/
|
|
|
|
interface CustomRenderOptions extends RenderOptions {
|
|
queryClient?: QueryClient;
|
|
}
|
|
|
|
const createTestQueryClient = () => new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
gcTime: 0,
|
|
},
|
|
},
|
|
});
|
|
|
|
const AllTheProviders = ({ children, queryClient }: { children: React.ReactNode; queryClient: QueryClient }) => {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<SettingsProvider>
|
|
<MemoryRouter>
|
|
{children}
|
|
</MemoryRouter>
|
|
</SettingsProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
};
|
|
|
|
const renderWithProviders = (
|
|
ui: ReactElement,
|
|
{ queryClient = createTestQueryClient(), ...renderOptions }: CustomRenderOptions = {}
|
|
) => {
|
|
const component = (
|
|
<AllTheProviders queryClient={queryClient}>
|
|
{ui}
|
|
</AllTheProviders>
|
|
);
|
|
|
|
return { queryClient, ...rtlRender(component, renderOptions) };
|
|
};
|
|
|
|
export * from '@testing-library/react';
|
|
export { renderWithProviders, createTestQueryClient };
|