React-Router + Typescript error while wrapping component with Router “No overload matches this call”

I have a component that was working fine until I make a snapshot test. It says “you should not use Link outside of a Router” . Then I wrapped the component with router, but it doesn’t work. Here is the component:

import React from "react";
import "./Body.css";
import { Link, Router } from "react-router-dom";
const Body: React.FC = () => {
  return (
    <div className="body">
      <Router>
        <Link to="/movies">
          <div className=" body__item">
            <p>MOVIES</p>
          </div>
        </Link>
        <Link to="/series">
          <div className=" body__item">
            <p>SERIES </p>
            <img src="../../../images/placeholder.png" alt="" />
          </div>
        </Link>
      </Router>
    </div>
  );
};

export default Body;

I have @types for react-router-dom so it’s not the problem. I also tried wrapping around the component.

Also the full error is:

No overload matches this call. Overload 1 of 2, ‘(props: RouterProps | Readonly): Router’, gave the following error. Property ‘history’ is missing in type ‘{ children: Element[]; }’ but required in type ‘Readonly’. Overload 2 of 2, ‘(props: RouterProps, context: any): Router’, gave the following error. Property ‘history’ is missing in type ‘{ children: Element[]; }’ but required in type ‘Readonly’.ts(2769) index.d.ts(99, 5): ‘history’ is declared here. index.d.ts(99, 5): ‘history’ is declared here.

Answer

I figured it out from another question, I forgot to add my test code and didn’t mention that I’m also using Jest for testing. this is solution code:

import { render } from "@testing-library/react";
import NotFoundPage from "../Components/NotFoundPage/NotFoundPage";
import { BrowserRouter } from "react-router-dom";

const { container } = render(
  <BrowserRouter>
    <NotFoundPage />
  </BrowserRouter> 
// I was just rendering without wrapping it like this. so you should 
// wrap your component like this while testing
);

// SnapShot Test
it("Not found page matches snapshot", () => {
  expect(container).toMatchSnapshot();
});