如何模拟useRouter参数的反应钩-测试库？

Question

我有一个定制的钩子，它的结构是：

const urlHook = () => {
const router = useRouter();

const read = () => {
  return validate(router.query.param);
}

const write = (params) => {
  router.push(
    {
      query: {
        param: params,
      },
    },
    undefined,
    {shallow: true},
  )
}

const validate = (params) => {}
}

我想使用react-hooks-testing-library测试这个钩子，但是我不知道如何设置router.query.param来读取我想要的值，或者如何检查函数write()是否会创建正确的url？

Answer 1

来模拟整个钩子- jest.requireActual

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: () => ({
    blogId: 'company1',
    articleId: 'blog1',
  }),
  useRouteMatch: () => ({ url: '/blog/blog1/article/article1' }),
}));

要模拟历史/路由状态- MemoryRouter：

import {Route, MemoryRouter} from 'react-router-dom';

...

const renderWithRouter = ({children}) => (
  render(
    <MemoryRouter initialEntries={['blogs/1']}>
      <Route path='blogs/:blogId'>
        {children}
      </Route>
    </MemoryRouter>
  )
)

有解释的有用示例：https://v5.reactrouter.com/web/guides/testing