- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经查看了以下帖子,但仍然遇到在 React 中使用 useNavigate 进行重定向的问题。
https://github.com/remix-run/react-router/issues/7811
创建帖子片段
const result = await dispatch(postCreateView(postObj))
if(result){
nav('/posts')
}
测试设置
import {screen, render, fireEvent} from '@testing-library/react'
import { MockComponent } from '../../testMockComponentWrapper'
import { PostCreate } from '../PostCreate'
const mockedUsedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedUsedNavigate,
}));
describe('Post Create', () => {
it('successful post with redirect', async () => {
const {container} = render(<MockComponent><PostCreate/></MockComponent>)
const titleElement = screen.getByPlaceholderText(/enter title/i)
const descriptionElement = screen.getByPlaceholderText(/enter description/i)
const buttonElement = screen.getByRole('button')
fireEvent.change(titleElement, {target: {value: 'A New title from Testing'}})
fireEvent.change(descriptionElement, {target: {value: 'A New description from Testing'}})
fireEvent.click(buttonElement)
expect(mockedUsedNavigate).toHaveBeenCalledTimes(1);
})
})
模拟组件:
export const MockComponent = (props) => {
return(
<BrowserRouter>
<Provider store={store}>
{props.children}
</Provider>
</BrowserRouter>
)
}
我也试过
export const MockComponent = (props) => {
return(
<Router>
<Provider store={store}>
{props.children}
</Provider>
</Router>
)
}
BrowserRouter 报错:
TypeError: Cannot read property 'pathname' of undefined
使用 Router I 我得到的错误:
Expected number of calls: 1
Received number of calls: 0
我原以为调用次数会是 1,因为 useNavigate 会由 jest 处理,但事实似乎并非如此。
我使用的版本:
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-router-dom": "^6.2.1",
仅供引用,以下确实有效并测试了 react-redux 的调度方法:
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch
}))
// In the test
await expect(mockDispatch).toHaveBeenCalledTimes(1);
如果有人对此提供帮助,我将不胜感激。如果有更好的地方发布这个问题或我错过的 SO 指南,我提前道歉,我们将不胜感激。提前谢谢你。
最佳答案
阿格! super 简单的答案......有时它有助于在 SO 上发布问题所以它迫使我更深入地挖掘......:)
这里是任何感兴趣的人的解决方案和解释......感谢阅读
import {screen, render, fireEvent} from '@testing-library/react'
import { MockComponent } from '../../testMockComponentWrapper'
import { PostCreate } from '../PostCreate'
// mock useDispatch
const mockDispatch = jest.fn();
jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useDispatch: () => mockDispatch.mockReturnValueOnce(true) // Return a value since I'm expecting a value to be returned before I redirect
}))
// mock useNavigate
const mockedUsedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedUsedNavigate, // Return an empty jest function to test whether it was called or not...I'm not depending on the results so no need to put in a return value
}));
describe('Post Create', () => {
it('successful post with redirect', async () => {
const {container} = render(<MockComponent><PostCreate/></MockComponent>)
const titleElement = screen.getByPlaceholderText(/enter title/i)
const descriptionElement = screen.getByPlaceholderText(/enter description/i)
const buttonElement = screen.getByRole('button')
fireEvent.change(titleElement, {target: {value: 'A New title from Testing'}})
fireEvent.change(descriptionElement, {target: {value: 'A New description from Testing'}})
fireEvent.click(buttonElement)
// Await the dispatch results
await expect(mockDispatch).toHaveBeenCalledTimes(1);
await expect(mockedUsedNavigate).toHaveBeenCalledTimes(1);
})
})
如果我在解释或理解中遗漏了什么,我将不胜感激更新或见解。谢谢,
关于reactjs - react 模拟测试 useNavigate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70896585/
我在https://reactrouter.com/en/main/hooks/use-navigate中看到“在加载器和操作中使用重定向通常比在这个钩子中使用重定向更好”,所以我应该将useNavi
我已经查看了以下帖子,但仍然遇到在 React 中使用 useNavigate 进行重定向的问题。 react jest mock useNavigate() https://github.com/r
我已经查看了以下帖子,但仍然遇到在 React 中使用 useNavigate 进行重定向的问题。 react jest mock useNavigate() https://github.com/r
我正在尝试编写一个 React Breadcrumbs 组件,它会自动设置 react-router-dom 中返回导航所需的数量。 我有一个带有路径名的数组,它的长度可以是 2 或更多。所有项目都是
有没有办法在 react-router v6 的功能组件之外使用 useNavigate() 钩子(Hook)?我正在尝试在 saga 函数中使用 navigation(url) 。我知道在 v4 中
我正在使用 useNavigate 转到组件,并且需要在单击按钮时将数据(状态)传递给此 ChatRoom 组件。该组件位于路径 /chatroom 上。我正在使用 React Router Dom
我是 react-native 的初学者。如何在 React 类组件中使用 useNavigation Hook ? 最佳答案 From Documentation -您可以将类组件包装在函数组件中以
我有一个具有以下功能的 react 组件 const handleNavigate = (clientId) => { console.log(clientId)
尝试导入时 useNavigate来自 react-router-dom ,我收到以下错误: Attempted import error: 'useNavigate' is not exported
在应用程序中使用它之前,我正在使用 stackblitz 尝试实现 MUI Drawer 和 react-router-dom。我认为我没有正确使用 useNavigate Hook ?任何帮助将不胜
在较旧的 React Router Dom 版本中,如果用户已登录,我可以使用此代码进行重定向: history.push('/login?redirect=shipping') 现在在 v6 中,我
我试图在另一个模块中放置一个导航到屏幕的函数并将其导出,但是 navigation 不起作用。我尝试使用 UseNavigation() 但出现错误,即:Unhandled promise rejec
我在前端使用 ReactJS,在后端使用 NodeJS,我尝试使用导航功能进行重定向,但出现错误。我应该怎么做?我哪里不见了?报名成功如何跳转? 我的行动: export const signup =
我正在尝试使用 useNavigation() Hook 与 react-navigation 交互,以响应我在 useEffect() 中注册的回调。 linter 警告我 useEffect()
我正在使用 React Navigation 的 useNavigation 钩子(Hook): 在 MyComponent.js 中: import { useNavigation } from "
我正在尝试发送变量 id在 react-router-dom 版本 6 中使用 useNavigate 到另一个页面。这是我正在尝试的: const handleSelect = (id: numbe
我是一名优秀的程序员,十分优秀!