时间戳

首页 > 解决方案 > Jest 和 React 测试库未在页面加载时加载最终 DOM

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

问题描述

我正在尝试使用 Jest 和 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();
    });

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

谢谢。

标签： javascriptreactjsunit-testingjestjsreact-testing-library

解决方案

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

推荐阅读