测试 React 组件时，如何确保我的组件通过带有参数的 url 进行渲染？

Question

我有一个可以通过两个流命中的组件。一条路线是

user/Plan

，另一条路线是

user/:userId/Plan

。我有组件的不同部分，它们根据调用

useParams

获得的值进行渲染，以查看我们正在经历哪个流程。有没有办法可以渲染组件并确保它使用

user/:userId/Plan

流程？

我只需执行以下操作即可获得默认测试：

        const result = render(
            <BrowserRouter>
                <UserPlan model={modelStub} />
            </BrowserRouter>,
        );

但是，我不确定如何强制它使用 url

user/:userId/Plan

进行渲染？我是否以错误的方式处理这个问题？我应该只是嘲笑 useParams 还是什么？

Answer 1

我能够通过利用

<MemoryRouter>

来实现这一点。我的代码：

const route = '/User/1/Plan';

const result = render(
   <MemoryRouter initialEntries={[route]}>
        <Routes>
            <Route path={UserRoutes.User.Plan} element={<UserPlan model={modelStub} />} />
        </Routes>
   </MemoryRouter>,
);