React，快照测试 useParams undefined

Question

我正在尝试为我的组件编写快照测试以响应 在我的组件中，我有useParams() 在运行测试时，它返回一个未定义的错误：

TypeError: Cannot read property 'match' of undefined

  20 |   const [value, setValue] = useState();
  21 |   const { show, changeDetails } = props;
> 22 |   const { id } = useParams();
     |                  ^

组件位于

  <Switch>
      <Route
        exact
        path="/myroute/:id"
        component={() => (
          <>
            <ModuleDetails />
          </>
        )}
      />
    </Switch>

而 test.js 就像

it('renders correctly the assessment show page', () => {
  const history = createMemoryHistory();
  history.push('/myroute/1');
  let tree = renderer
    .create(
      <Router history={history}>
        <ModuleDetails />
      </Router>
    )
    .toJSON();
  expect(tree).toMatchInlineSnapsot(``);
});

Answer 1

您需要将组件包装在 Router 中，useParams 使用来自路由器上下文的某些东西（可能是历史对象），没有路由器 - 没有上下文。

https://reactrouter.com/web/guides/testing

并且已经回答How to test components using new react router hooks?

Answer 2

const container = document.createElement('div');
 render(
      <MemoryRouter initialEntries={['/myroute/1']}>
        <Route
          exact
          path="/myroute/:id"
          component={() => (
            <>
              <ModuleDetails />
            </>
          )}
        />
      </MemoryRouter>,
      container
    );