import { ReactElement, ReactNode } from 'react';

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { RenderOptions, render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

const CustomWrapper = ({ children }: { children: ReactNode }) => {
  return (
    <ChakraProvider value={defaultSystem}>
      <BrowserRouter>{children}</BrowserRouter>
    </ChakraProvider>
  );
};

const customRender = (ui: ReactElement, options: RenderOptions = {}) =>
  render(ui, {
    wrapper: CustomWrapper,
    ...options,
  });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };