I am getting this error in component testing cypress > cannot destructure property 'basename' of 'react__webpack_imported_module_0__.usecontext(...)' as it is null. cypress

[apsingh03]

cy.mount( <ProductBox productsArray={[]} subCategory="samsung" />

index.js

 <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>

producybox.js

import React from "react";
import {Link , useNavigate  }    from "react-router-dom";

import Carousel from "./Carousel";

const ProductBox = (props) => {
  // console.log(props.productsArray[0])
  // console.log(props)

  return (
    <>
      <div className="sectionFour " id="productCarouselBox" >
        <div className="row">
          <div className="col-2 leftSide">
            <h4 className="fs-2">
              Top Deals on <br />{" "}
              <span data-cy="subCategory"> {props.subCategory} </span>
            </h4>
            <button className="btn btn-primary btn-md py-2 px-5 mt-4 ">
              <Link
                to={`/productall/Mobiles/${props.subCategory}/`}
                style={{ textDecoration: "none", color: "#fff" }}
              >
                {" "}
                View All{" "}
              </Link>

            </button>
          </div>

          <div className="col-10 rightSide">
            <Carousel
              productsArray={props.productsArray}
              subCategory={props.subCategory}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default ProductBox;

[kare]

Try:

cy.mount(<MemoryRouter><ProductBox /></MemoryRouter>)