单元测试不使用带参数的 URL 路径，当将 REACH 路由器与反应测试库一起使用时

Question

我正在尝试为反应组件创建一个单元测试，其中组件的 props 检查 url 路径的一部分以决定操作过程，并在路径末尾接收参数或值。

使用 https://testing-library.com/docs/example-reach-router 中给出的示例，我创建了自己的单元测试，但是当我运行测试时，我的组件抱怨uri值不存在。此外，当我向组件添加控制台.log(props(并再次运行测试时，props 是未定义的。

我已经尝试了使用位置提供程序在历史记录中添加包装我的组件的变体，如 https://reach.tech/router/api/LocationProvider 所示

相关的代码片段是 -

function renderWithRouter(
ui,
{ route = '/', history = createHistory(createMemorySource(route)) } = {}
) {
return {
...render(
<LocationProvider history={history}>{ui}</LocationProvider>
)
,
history,
}
}
describe('View Order Test', () => {
describe('Order', () => {
it('Renders the Order View for a specific Order', async () => {
const { queryByText } =
renderWithRouter(
<State initialState={initialState} reducer={reducer}>
<ViewOrder />
</State>
, { route: '/order/orderView/1234', }
)
expect(queryByText('OrderID: 1234'))
}
)
})

似乎什么都不起作用。有没有办法将 props 传递给单元中的 uri(@reach/路由器(组件？正如我所说，我的单位是上面给出的复本

Answer 1

通过添加 Reach 路由器并将其包裹在组件周围来解决。

Answer 2

我在使用 url 参数和reach-router测试组件时遇到了类似的问题。

路由文件示例：

import { Router } from "@reach/router";
import Item from "pages/Item";
const Routes = () => (
<Router>
<Item path="/item/:id" />
</Router>
);
...

在我的测试代码中，我在渲染函数中做到了这一点：

import {
Router,
createHistory,
createMemorySource,
LocationProvider,
} from "@reach/router";
import { render } from "@testing-library/react";
export function renderWithRouter(
ui,
{ route = "/", history = createHistory(createMemorySource(route)) } = {}
) {
return {
...render(
<LocationProvider history={history}>
<Router>{ui}</Router>
</LocationProvider>
),
history,
};
}

和测试用例：

test("renders the component", async () => {
renderWithRouter(<Item path="/item/:id" />, { route: "/item/1" });
...
});

通过这种方式，我能够获得 url 参数并且所有测试都运行良好。