import type { FC, ReactElement } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render, RenderOptions, RenderResult } from '@testing-library/react';
import { ThemeProvider } from '../../components/@styles/theme-provider';
import { StyledEngineProvider } from '@mui/material/styles';

const themeRenderWrapper: FC = ({ children }) => {
  return (
    <BrowserRouter>
      <StyledEngineProvider injectFirst>
        <ThemeProvider>{children}</ThemeProvider>
      </StyledEngineProvider>
    </BrowserRouter>
  );
};

const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => RenderResult = (
  ui,
  options
) => render(ui, { wrapper: themeRenderWrapper, ...options });

export { customRender as render };