Example of a Testing Library renderWith helper function to include React Router match object in tests

renderWithRouterMatchExample.js

// Component example

// ContentWrapper.jsx
import React from "react";
import Main from "./Main";
import { withRouter } from "react-router-dom";  
const ContentWrapper = ({ children, match }) => (
  <Main>
    <p>Match id: {match.params.id}</p>
    {children}
  </Main>
);  
export default withRouter(ContentWrapper);


//Test file

// Helper function
export function renderWithRouterMatch(
  ui,
  {
    path = "/",
    route = "/",
    history = createMemoryHistory({ initialEntries: [route] })
  } = {}
) {
  return {
    ...render(
      <Router history={history}>
        <Route path={path} component={ui} />
      </Router>
    )
  };
}

// ContentWrapper.test.js
import React from "react";
import ContentWrapper from "./ContentWrapper";
import "@testing-library/jest-dom/extend-expect";
it("mocks match.params in the test in case your component references match.params.someValueHere", () => {
  const { getByText } = renderWithRouterMatch(ContentWrapper, {
    route: "/project/ABC123",
    path: "/project/:id"
  });
  expect(getByText("Match id: ABC123")).toBeInTheDocument();
});