Jest 和 React 测试库未在页面加载时加载最终 DOM答案

【问题标题】：Jest and React Testing Library not loading the final DOM on page loadJest 和 React 测试库未在页面加载时加载最终 DOM
【发布时间】：2020-09-10 07:16:45
【问题描述】：

我正在尝试使用 Jest 和 React 测试库来测试我的 react 应用程序。在此，我想在登录页面完全加载时看到消息。在初始加载时，我的登录页面显示“正在加载..”消息。之后，输入字段加载缓慢。

当 DOM 已完全加载时，我试图找到一个文本元素。使用这个

screen.findAllByText("Basic login page") ;

但是，screen.debug 只加载它直到“加载..”阶段。

test("User should see login page", async () => {
        render(<></>, {route: "/login"});
        await screen.findAllByText("Basic login page") ;
        screen.debug();
    });

有没有办法解决这个问题？

谢谢。

【问题讨论】：

标签： javascript reactjs unit-testing jestjs react-testing-library

【解决方案1】：

React 测试库用于单元测试，因此您需要在内存中设置浏览器历史记录并配置您的路由器。

在此处查看文档： https://testing-library.com/docs/example-react-router

你希望你的测试是这样的：

import { createMemoryHistory } from 'history'

...

test('User should see login page', () => {
  const history = createMemoryHistory()
  history.push('/login')
  const { findByText } = render(
    <Router history={history}>
      <App />
    </Router>
  );
  expect(findByText('Basic login page')).toBeTruthy();
})

【讨论】：