使用React Router进行导航测试失败

npm install react-router-dom @testing-library/react

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('navigates to the home page', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <App />
    </MemoryRouter>
  );

  expect(screen.getByText('Home')).toBeInTheDocument();
});

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>Go to About</button>
  );
}

npm install @testing-library/user-event

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('navigates to the about page', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <MyComponent />
    </Memory路由器>
  );

  userEvent.click(screen.getByText('Go to About'));

  expect(screen.getByText('About')).toBeInTheDocument();
});

<Route path="/about" element={<About />} />