Error: Invariant failed: You should not use outside a in react

While testing the react component, I keep getting this error: Invariant failed: You should not use outside a . I added this – import {Route, Switch} from “react-router-dom”; but it didn’t help.

Component to be tested (Hero Section):

import React from 'react';
import './HeroSection.css';
import Searchbox from './search/Searchbox'

function HeroSection() {
  return (
    <div className='hero-container'>
      <img src='/images/Home/hero.jpg'/>
      <h1>Title 1</h1>
        <Searchbox />
    </div>
  );
}

export default HeroSection;

HeroSection.test.js :

import * as React from "react";
import * as ReactDOM from "react-dom"

import HeroSection from './HeroSection'

test('testing', () => {
    const root = document.createElement("div");
    ReactDOM.render(<HeroSection />, root);
    expect(root.querySelector("h1").textContent).toBe("Title 1");
})

Any suggestion to solve the problem would be very helpful!

Answer

This problem occurs because components imported from ‘react-router should be wrapped with Router provider. You can refer this for the details https://testing-library.com/docs/example-react-router/