import { render as rtlRender, RenderOptions, RenderResult, } from "@testing-library/react"; import { ReactElement } from "react"; import { Provider } from "react-redux"; import { configureStoreWithMiddlewares, RootState } from "../app/store"; type CustomRenderOptions = { preloadedState?: RootState; renderOptions?: Omit<RenderOptions, "wrapper">; }; const render = ( ui: ReactElement, { preloadedState = {}, ...renderOptions }: CustomRenderOptions = {} ): RenderResult => { const store = configureStoreWithMiddlewares(preloadedState); const Wrapper: React.FC = ({ children }) => { return <Provider store={store}>{children}</Provider>; }; return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); }; export * from "@testing-library/react"; export { render };
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter