小编tho*_*zmz的帖子

如何使用 MemoryRouter 来测试 useParams 调用

我有一个假设的 React 组件,Component.ts其代码结构类似于:


import React from 'react';
import { useParams } from 'react-router-dom';

export const Guide = () => {

  const { serviceId } = useParams();

  return (
    <p>{serviceId}</p>
  )

}

Run Code Online (Sandbox Code Playgroud)

为了测试该组件的行为,我尝试在我的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'> …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-router-dom

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

react-router-dom ×1

reactjs ×1

typescript ×1