我有一个假设的 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)