时间戳

首页 > 解决方案 > 如何使用 MemoryRouter 测试 useParams 调用

reactjs - 如何使用 MemoryRouter 测试 useParams 调用

问题描述

我有一个假设的 React 组件，其名称Component.ts类似于以下代码结构：


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();

});

当我使用5.2.2. 运行测试时，Jest 显示以下消息：react-router-dom6.0.0-beta.0

Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: "guides/some-service-id")

标签： reactjstypescriptreact-router-dom

解决方案

经过大量搜索，我在测试套件中找到了答案。

6.0.0-beta.0 中的技巧是将你<Route />的 's 包装在<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());
});

推荐阅读