- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个名为 Component.ts
的假设 React 组件,其代码结构类似于:
import React, { FC } from 'react';
import { useParams } from 'react-router-dom';
export const Guide: FC<{}> = () => {
const { serviceId } = useParams();
return (
<p>{serviceId}</p>
)
}
为了测试该组件的行为,我试图在我的 Component.test.ts
文件中执行类似于以下内容的操作:
import React from 'react';
import { render } from '@testing-library/react';
import { Component } from './Component';
import { Route, MemoryRouter } from 'react-router-dom';
test('my Component test', async () => {
const someServiceId = 'some-service-id';
const { findByText } = render(
<MemoryRouter initialEntries={[`guides/${someServiceId}`]}>
<Route path='guides/:serviceId'>
<Guide />
</Route>
</MemoryRouter>
);
expect(await findByText(someServiceId)).toBeInTheDocument();
});
当我使用 react-router-dom
的 5.2.2
版本时,我的测试工作正常,但自从我更新到 6.0.0- 后它失败了beta.0
。 Jest 在运行测试时显示以下消息:
Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: "guides/some-service-id")
最佳答案
经过大量搜索,我找到了答案 in the test suite .
6.0.0-beta.0 中的技巧是包装你的 <Route />
在 <Routes />
中.另请注意,组件是从 react-router
导入的而不是 react-router-dom
:
import {
MemoryRouter,
Routes,
Route,
} from 'react-router';
test('my Component test', async () => {
const someServiceId = 'some-service-id';
const { findByText } = render(
<MemoryRouter initialEntries={[`guides/${someServiceId}`]}>
<Routes>
<Route path='guides/:serviceId'>
<Guide />
</Route>
</Routes>
</MemoryRouter>
);
await waitFor(() => expect(findByText(someServiceId)).toBeInTheDocument());
});
关于reactjs - 如何使用 MemoryRouter 来测试 useParams 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63801455/
我想测试我的组件是否可以获取位置的搜索部分并转换为 json 以供使用,但是当我使用查询字符串设置 initialEntries 时,搜索部分没有改变。 //My Test render(
我正在为 React 应用程序编写快照测试,并且我发现当我使用 编写测试时会出现这种情况。在它们中,它发出警告,我需要有一个独特的关键 Prop 。 当我查看react-router文档时,没有提到
在我的项目中,我必须在不更改 url 的情况下从一个组件导航到另一个组件。为此,我使用了 MemoryRouter这按预期工作。但现在同样的想法应该适用于不同的路线,即 /one和 /two .例如,
我已经密切关注这些例子,但我无法得到 内存路由器 (这是您应该如何测试路由组件?)使用 Jest 和 enzyme 进行测试。 我想导航到其中一条路线,并将其反射(reflect)在我的快照中。下面的
我正在尝试弄清楚如何使用测试来断言当前位置路径名是什么。 作为实验and based on some docs我写了下面的测试 test(`Can navigate MemoryRouter`,
我有一个名为 Component.ts 的假设 React 组件,其代码结构类似于: import React, { FC } from 'react'; import { useParams } f
我正在构建一个 React 应用程序,我不想在其中更新浏览器中的 URL。我没有使用“react-router-dom”,而只使用“react-router”和 MemoryRouter(https:
我正在尝试测试一个组件,该组件通过在 Enzyme 中创建一个包装器来监听正在更改的历史记录,该包装器将我的组件放置在 MemoryRouter 中;即: mount(
我的任务是测试依赖于上层某处的 BrowserRouter 组件的 React 组件。据我所知,BrowserRouter 将路由对象传递给任何子对象、孙对象等的 props。 组件: import
如有重复请见谅 我知道 MemoryRouter 有 initialEntries 和 initialIndex,所以你可以为“location”和“history”设置路径等。但是“匹配”没有得到更
我正在尝试测试我的路由器是否按预期工作。但是我无法让路由器指向除 / 之外的其他位置 这是我的简化测试代码。 App.tsx import React from 'react'; import {Ro
所以,我正在尝试使用 MemoryRouter 进行测试,如果我点击一个应该将我带到新的Route 的按钮,它实际上会打开该路由. 所以“ConversationView”是 Conversation
将 React Router DOM (v6) 与 React 测试库结合使用,我想知道是否有办法处理来自 createMemoryHistory 的“模拟”历史记录或类似的替代方法。 基于Testi
我一直在尝试让测试适用于react-router v4。我已经采取了记录的基本example here并为其编写了以下测试: import React from 'react'; import { T
我正在使用 React 构建单页 Web 应用程序。对于此应用程序,我想防止 URL 更改,并避免使用 href 链接以防止“链接预览”出现在浏览器的左下角。 为了解决我的问题的前半部分,我发现在应用
我正在使用react-router-dom并找到很有用。但是,我仍然希望许多路由能够在浏览器中从 URL 读取/写入。我应该如何实现这个? 谢谢 最佳答案 最好将您的应用程序包装在 BrowserRo
我是一名优秀的程序员,十分优秀!