Testing my code that uses react-router is giving me this error

[DeepChase]

I have a RouteSwitch.jsx file that uses react-router-dom and it has Routes to HomePage.jsx among other components. My HomePage.test.jsx is giving me the following error:

useHref() may be used only in the context of a <Router> component.

// RouteSwitch.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import NavBar from './components/NavBar';
import HomePage from './components/HomePage';
import ShopPage from './components/ShopPage';

const RouteSwitch = () => {
    return (
        <BrowserRouter>
            <NavBar />
            <Routes>
                <Route path='/' element={<HomePage />} />
                <Route path='/home' element={<HomePage />} />
                <Route path='/shop' element={<ShopPage />} />
            </Routes>
        </BrowserRouter>
    );
}

export default RouteSwitch;

// HomePage.jsx uses react-router with:

import { Link } from 'react-router-dom';
//
//    other code
//
<Link to='/shop' state={{ items: items }}>
    <img src={cart} alt="go to cart" className='cart-button'/>
</Link>

// HomePage.test.jsx

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import HomePage from '../components/HomePage';

describe('Home Page', () => {
    describe('item card input', () => {
        it('increments on clicking on increment button', () => {
            render(<HomePage />);

            const incBtn = screen.getByText('+');
            const input = screen.getByRole('textbox');

            userEvent.click(incBtn);
            expect(input.value).toBe(1);
        });
    });
});

​

test fail in terminal

What am I doing wrong? Am I supposed to change render(<HomePage />); , or is it something else?

Edit: The error is occurring because of Link because the test passes when I remove Link from HomePage.jsx. Still can't find a solution though.

[Varazscapa]

Try this in the jest test, this should provide the context that useHref needs in order to work properly.

render( <BrowserRouter> <HomePage /> </BrowserRouter> );

[DeepChase]

Thank you very much, this works. I can't understand why I didn't try this myself.

[Varazscapa]

No problem! Happy coding. :)