How to test screen transition by Link component in react

Question

I'm writing test code for my react app. I want to write test code that tests screen transition from Page A to Page B.

However, somehow the event to make user move to Page B from Page A doesn't work in my test code.

This is the test code.

• Test code

import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import Routes from '../src/rouer';

const App = () => {
  return (
    <StaticRouter>
      <Routes />
    </StaticRouter>
  );
};

describe('Test screen transition', () => {
  it('Test screen transition', () => {
    render(<App />);
    screen.debug();

    // I want this line makes the click event fired, but it doesn't
    fireEvent.click(screen.getByText('Go to Page B from Page A'));
    screen.debug();
  });
});

• This is my Page A component

import * as React from 'react';
import { Link } from 'react-router-dom';

const A = () => {
  return (
    <>
      <div>
        <Link to="/b">Go to Page B from Page A</Link>
      </div>
    </>
  );
};

export default A;

• This is my Page B component

import * as React from 'react';
import { Link } from 'react-router-dom';

const B = () => {
  return (
    <>
      <div>
        This is Page B
      </div>
    </>
  );
};

export default B;