Testing Library renderWithRouter helper function

renderWithRouter.js

// https://testing-library.com/docs/example-react-router

import React from "react";
import { Router } from "react-router-dom";
import { render } from "@testing-library/react";
import { createMemoryHistory } from "history";

// test utils file
function renderWithRouter(
  ui,
  {
    route = "/",
    history = createMemoryHistory({ initialEntries: [route] })
  } = {}
) {
  return {
    ...render(<Router history={history}>{ui}</Router>),
    history
  };
}

If using typescript, I'm sure you could adjust this however you like? This specific approach is for a project w/o typescript.

would it be possible to include a typescript binding too?

You could do something like this:

// setupTests.tsx

import React from 'react';
import { Router } from 'react-router-dom';
import { render } from '@testing-library/react';
import { createMemoryHistory, MemoryHistory } from 'history';

interface RenderWithRouterProps {
  route?: string;
  history?: MemoryHistory;
}

export const renderWithRouter = (
  ui: React.ReactNode,
  { route = '/', history = createMemoryHistory({ initialEntries: [route] }) }: RenderWithRouterProps = {},
) => {
  return {
    ...render(<Router history={history}>{ui}</Router>),
    history,
  };
};

notice the .tsx extension instead of .ts. You could also move this to a seperate renderWithRouter util file