错误：useHref() 在测试时只能在 <Router> 组件的上下文中使用

Question

我有一个 React 项目，我正在尝试使用 React 测试库添加测试。当我运行我的测试时，我不断收到这个错误：Error: useHref() may be used only in the context of a <Router> component. 我确实在这里找到了几个关于这个错误的问题，我尝试了解决方案但没有成功。我知道这与 React Router Dom 有关。也许有人能发现我做错了什么。

这是我的 App.js：

import React, { useState } from 'react';
import Providers from './context/GlobalContextProviders';
import {
    BrowserRouter as Router,
    Route,
    Routes
} from 'react-router-dom';

import './styles/App.scss';
import { Header } from './components/containers';
import Main from './components/views/Main';
import UsersCenter from './components/views/UsersCenter';
import IngredientsCenter from './components/views/IngredientsCenter';
import NavMenu from './components/containers/NavMenu';
import CSFCenter from './components/views/CSFCenter';

const App = () => {
    const [showUserSettings, setShowUserSettings] = useState(false);
    const [showNavMenu, setShowNavMenu] = useState(false);

    return (
        <Providers>
            <div className={'App'}>
                <Router>
                    <div className={'container-fluid g-0'}>
                        <Header
                            title={'Quotes System IngredientsCenter'}
                            showUserSettings={showUserSettings}
                            setShowUserSettings={setShowUserSettings}
                            showNavMenu={showNavMenu}
                            setShowNavMenu={setShowNavMenu}
                        />
                        {showNavMenu && (
                            <NavMenu setShowNavMenu={setShowNavMenu} />
                        )}
                        <Routes>
                            <Route path={'/'} element={<Main />} />
                            <Route path={'/users'} element={<UsersCenter />} />
                            <Route
                                path={'/ingredients'}
                                element={<IngredientsCenter />}
                            />
                            <Route path={'/CSFCenter'} element={<CSFCenter />} />
                        </Routes>
                    </div>
                </Router>
            </div>
        </Providers>
    );
};

export default App;

然后是我的测试：

import {
    render,
    screen,
    within,
    fireEvent,
    waitFor
} from '@testing-library/react';
import ReactModal from 'react-modal';
import IngredientsCenter from '../views/IngredientsCenter';

test('The ingredients table exists on the screen', async () => {
    render(
        // ReactModal.setAppElement(document.createElement('div')),
        <IngredientsCenter />
    );
    const ingredientsTable = screen.getByRole('ingredients-table');
    await waitFor(() => {
        expect(ingredientsTable).toBeTruthy();
    });
});

Answer 1

当组件需要某种上下文时（例如，使用 Redux 的 connect()ed 组件，或者这里使用 react-router），而不是仅仅渲染组件本身，

render(<IngredientsCenter />);

您需要将其包装在所需的提供程序中：

render(<Router><IngredientsCenter /></Router>);

如果你发现自己需要做很多事情，你当然可以写一个包装器：

function renderWithProviders(el) {
  render(<Providers><Router>{el}</Router></Providers>);
}