Reactjs 如何通过react中的链接组件测试屏幕转换

我正在为我的react应用程序编写测试代码。我想编写测试代码，测试从

页面A

到

页面B

的屏幕转换

然而，不知何故，让用户从

页面A

移动到

页面B

的事件在我的测试代码中不起作用

这是测试代码

• 测试代码

• 这是我的

  页面B

  组件

import*as React from'React'；
从'react router dom'导入{Link}；
常数B=（）=>{
返回(
这是B页
);
};
导出默认值B；

需要考虑的事项：端到端测试（使用诸如Cypress之类的工具）可能更适合这类事情，并支持创建更好的测试：）看起来更像是集成测试，而不是单元测试。您通常不会在单元测试中测试第三方代码。假设您没有编写的

链接

组件能够正常工作，并且经过了正确测试。如果您想测试导航，您需要访问历史记录，请参阅我编写的测试。您可以在中看到示例。相关问题：。需要考虑的事项：端到端测试（使用诸如Cypress之类的工具）可能更适合这类事情，并允许创建更好的测试：）看起来更像是集成测试，而不是单元测试。您通常不会在单元测试中测试第三方代码。假设您没有编写的

链接

组件能够正常工作，并且经过了正确测试。如果您想测试导航，您需要访问历史记录，请参阅我编写的测试。您可以在中看到示例。相关问题：。

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();
  });
});

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;

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

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

export default B;