- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 useLocation 钩子(Hook)从 URL 获取路径的组件。
const { pathname } = useLocation();
useEffect(() => { }, [pathname]);
当我尝试使用模拟位置时,
import React from 'react';
import ExampleComponent from './ExampleComponent';
import { fireEvent, render } from '@testing-library/react';
import { shallow } from 'enzyme';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: () => ({
pathname: 'https://URL/'
})
}));
describe('<ExampleComponent />', () => {
it('should render correctly', () => {
shallow(<ExampleComponent />);
});
});
我在运行测试时收到此错误,
最佳答案
尝试将 useLocation 模拟为 jest.fn().mockImplementation
jest.mock('react-router', () => ({
...jest.requireActual("react-router") as {},
useLocation: jest.fn().mockImplementation(() => {
return { pathname: "/testroute" };
})
}));
关于javascript - 如何正确模拟 useLocation?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67965012/
我开始使用 react-router,我发现我可以在 Link 组件中传递“props”,这样一些值就可以传递给另一个组件。我在我正在使用的按钮内发送一个名为“值”的组件,但是在接收该参数的组件中显示
我开始使用 react-router,我发现我可以在 Link 组件中传递“props”,这样一些值就可以传递给另一个组件。我在我正在使用的按钮内发送一个名为“值”的组件,但是在接收该参数的组件中显示
我有一个使用 useLocation 钩子(Hook)从 URL 获取路径的组件。 const { pathname } = useLocation(); useEffect(() => { }, [
尝试使用react-router-dom 5.1中引入的useLocation钩子(Hook),但抛出错误 - 对象不是函数。 我在下面粘贴了代码要点 使用 react - 16.13 react 路
尝试使用react-router-dom 5.1中引入的useLocation钩子(Hook),但抛出错误 - 对象不是函数。 我在下面粘贴了代码要点 使用 react - 16.13 react 路
我的 React 组件应该根据当前位置对状态进行一些更改。 有自定义钩子(Hook),在组件加载时调用。在 Hook 中检查 useLocation().pathname 以及 switch/case
下面是我的进口: import React, { useState } from "react"; import { HashRouter as Router, Routes, Route, Link
在做一个项目时,我注意到 useLocation 的奇怪行为。我找不到解释的钩子(Hook)。 我有一个按钮,单击它会将您重定向到 EditOrder页面并将传递一个状态: const navigat
我想知道使用(或不使用)useEffect 来更新 useLocation 的最大区别是什么。 我通常会发现人们在 useEffect 中设置 useLocation 以在 URL 的路径更改时更新状
这是一个棘手的问题。 一些信息: 我可以有多个图像的多个集合,每个集合都有一个特定的标题 Logo 。 我的收藏网址是这样的/collection/{collectionId}/item/{itemI
最近我发现我的 React 应用程序存在一些性能问题,经过一些研究我发现了 React Memo。一些训练示例正常工作,但是当将它连接到我的应用程序时它没有任何效果。我发现问题出在 useLocati
应用.js: import React from 'react'; import { Router, Route } from 'react-router-dom'; import Display f
我该如何解决这个任何类型的错误? 我尝试传递自定义类型,但没有成功 最佳答案 您可以从历史记录中导入位置。所以更新会像这样 import { Location } from "history"; co
我正在编写一个 typescript React 应用程序,它将让用户登录并更新 Dashboard 组件以显示用户信息,例如他们的访问 token 和他们的名字。我正在使用 useLocation
我正在努力为这种情况找到合适的类型。这是登录后重定向的简化版本。以下会产生编译器错误: Property 'from' does not exist on type '{} | { from: { p
import { useLocation } from 'react-router-dom';我目前正在使用 Nextjs, 我需要 的帮助使用位置 ` import Link from 'next
我使用 react 路由器 v6,我每次在我的主文件中使用初始化进行身份验证时都会显示此错误。我无法在互联网上找到解决方案。我只想在有用户时渲染一些路线,但现在它不渲染任何东西。 AuthNaviga
我正在尝试为具有路由器 Hook 的 React 功能组件编写单元测试 useLocation()像下面。 //index.js function MyComponent(props) { con
有时我使用 withRouter 来包装我的组件并使用 history , location来自 props ,有时我使用 useHistory() , useLocation() . 不知道这两种使
这个问题已经有答案了: Why React Hook useState uses const and not let (5 个回答) 已关闭 3 年前。 我在我的应用程序中使用 React Route
我是一名优秀的程序员,十分优秀!