- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 <UserListComponent />
,它输出一个 <Contact />
组件和 <Contacts />
提供的联系人列表。
问题是,在测试 <UserListComponent />
时,当我尝试安装它时,测试输出错误 Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
withRouter()
在 <Contacts />
组件中使用。
在父组件测试中如何在没有路由器的情况下模拟ContactsComponent
?
我发现了一些类似的问题 https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router但它只描述了组件被 withRouter()
本身覆盖的情况,而不是子组件。
UserList.test.jsx
const mockResp = {
count: 2,
items: [
{
_id: 1,
name: 'User1',
email: 'email1@gmail.com',
phone: '+123456',
online: false
},
{
_id: 2,
name: 'User2',
email: 'email2@gmail.com',
phone: '+789123',
online: false
},
{
_id: 3,
name: 'User3',
email: 'email3@gmail.com',
phone: '+258369147',
online: false
}
],
next: null
}
describe('UserList', () => {
beforeEach(() => {
fetch.resetMocks()
});
test('should output list of users', () => {
fetch.mockResponseOnce(JSON.stringify(mockResp));
const wrapper = mount(<UserListComponent user={mockResp.items[2]} />);
expect(wrapper.find('.contact_small')).to.have.length(3);
});
})
UserList.jsx
export class UserListComponent extends PureComponent {
render() {
const { users, error } = this.state;
return (
<React.Fragment>
<Contact
userName={this.props.user.name}
content={this.props.user.phone}
/>
{error ? <p>{error.message}</p> : <Contacts type="contactList" user={this.props.user} contacts={users} />}
</React.Fragment>
);
}
}
Contacts.jsx
class ContactsComponent extends Component {
constructor() {
super();
this.state = {
error: null,
};
}
render() {
return (
<React.Fragment>
<SectionTitle title="Contacts" />
<div className="contacts">
//contacts
</div>
</React.Fragment>
);
}
}
export const Contacts = withRouter(ContactsComponent);
最佳答案
测试包含 <Route>
的组件(使用 Jest)和withRouter
您需要在测试中导入 Router,而不是在组件中导入 Router
import { BrowserRouter as Router } from 'react-router-dom';
像这样使用它
app = shallow(
<Router>
<App />
</Router>);
关于reactjs - 开 Jest , enzyme : Invariant Violation: You should not use <Route> or withRouter() outside a <Router>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50025717/
我完全是 React 的初学者,在练习时遇到了这个问题。 通过搜索,我发现'react-router-dom v6'不再支持'withRouter'。但我不知道如何将我的代码更改为与 v6 兼容。 有
我想导出组件 withRouter() 但我需要它没有默认的命名 export default withRouter(TopNav); 我试过了 export {TopNav} withRouter(
我想导出组件 withRouter() 但我需要它没有默认的命名 export default withRouter(TopNav); 我试过了 export {TopNav} withRouter(
我想访问应用程序导航上的匹配参数,我使用的是 react 和 react-router-dom。这是我制作的简单示例的代码片段,正如您在 Topics 组件上看到的那样,我在组件级别获得了正确的匹配,
我想在收到端点数据时触发状态更改,以便同步我的 GUI。 监听传入套接字数据的文件我们将调用sockets.js。在 sockets.js 内部我想调用路由转换。 if (data === 'game
我是 Reactjs 新手,我了解路由。这里我用了withRouter()以编程方式重定向。 我认为这个流程应该是:constructor->Willmount->render,但目前流程是const
我有一个当前用 withRouter 包装的组件(例如,我使用 export default withRouter(myComponent) ),因为我需要使用 history.push对于我在组件中
我目前正在使用 NodeJS 和 ReactJS 开发一个网络项目。我想在一个文件中包含两个组件,因为它们将使用相同的信息。其中一个组件使用 withRouter 来处理“this.props.his
我不想在某些路径上重新渲染我的组件,尝试使用 React.memo 并使用 withRouter HOC 检查当前路径。 React.memo 中的比较函数没有被调用。 function compar
我的动态路线有问题。它看起来像这样 [lang]/abc 我正在尝试从 [lang] 获取查询值但是当我使用 useRouter/withRouter我在页面的 2-3 渲染期间得到了查询(首先我得到
对于功能组件,我使用 withRouter 重定向到另一个组件,如下所示: const buttonClick = (history) => { history.push('/sp
我是 React 路由器的新手,遇到的困难很少。我在组件内使用历史没有问题。但是,我在上述组件之外有一个功能,它无法检测历史记录。我尝试了很多东西但无济于事。它给我一个 history is unde
我想知道在将用第 3 方 HOC 包装的组件上定义 propTypes 的最佳实践是什么,在本例中为 withRouter()来自 React-Router。 据我了解,propTypes 的目的是让
当我点击提交按钮时,我需要重定向到这个页面 pageOne,所以我用谷歌搜索并找到了一个 react 路由器并使用了这一行 this.props.history.push("/anotherPage"
我正在为我的项目使用 Redux 和 React。我在 App.js 中有一些路由。我也在我的项目中使用react-redux中的connect函数。为了防止更新阻塞问题,我通常以这种方式包装我的组件
当我使用 withRouter 时作为组件的装饰器,比如 @withRouter @observer // observer is mobx decorator export default clas
我正在尝试在 React+Typescript 中获得更深入的知识和实践,并且在使用 withRouter 时遇到了这个打字错误。来自 react-router-dom . 我的代码片段非常简单,我试
在 npm i --save react-router-dom 和 npm install --save with-router 之后我试着写 import {withRouter} from 're
我只是尝试像这样将 forwardRef 与 withRouter(mycomponent) 一起使用: export default function App() { const childRe
我构建了一个大型应用程序,其中导航栏上的单个按钮打开一个模式。 我正在使用上下文 API 跟踪 modalOpen 状态。 因此,用户单击导航栏上的按钮。模态打开。 Modal 有一个名为 Quote
我是一名优秀的程序员,十分优秀!