时间戳

首页 > 解决方案 > 当我使用 react 测试库、react.lazy 和 suspense 两次开玩笑地运行相同的测试时，为什么加载程序没有显示在第二个测试中？

reactjs - 当我使用 react 测试库、react.lazy 和 suspense 两次开玩笑地运行相同的测试时，为什么加载程序没有显示在第二个测试中？

问题描述

这是我的代码示例

// App.js

import React, { Suspense, lazy } from "react";

const Loader = () => <div data-testid="loader">Loading...</div>

const Login = lazy(() => import("./Login"));

function App() {
  return (
    <Suspense fallback={<Loader />}>
      <Login />
    </Suspense>
  );
}

export default App;


// Login.js

import React from 'react';

const Login = () => <div data-testid="login">Login</div>

export default Login

// App.test.js

import React from 'react';
import { render, waitForElementToBeRemoved, cleanup } from '@testing-library/react';
import App from './App';


describe('App when user is not signed in', () => {
  it("should redirect to login page", async () => {
    beforeEach(() => jest.resetAllMocks())
    const { getByTestId, getByText } = render(<App />);
    await waitForElementToBeRemoved(() => getByTestId('loader'))
    const linkElement = getByText(/Login/i);
  
    expect(linkElement).toBeInTheDocument();
  });
})

describe('App with User Logged in as Admin', () => {
  it("redirect to login page", async () => {
    beforeEach(() => {
      // will set local storage for auth token
      // for a logged in user
    })
    let container = document.createElement('div')
    const { getByTestId, getByText } = render(<App />, {
      container
    });
  
    await waitForElementToBeRemoved(() => getByTestId('loader'))
    const linkElement = getByText(/Login/i);
  
    expect(linkElement).toBeInTheDocument();
  });
})

我遇到的问题是，我希望在运行第二次测试时拥有加载器，但它不存在因此引发错误。

我想知道为什么加载器没有在第二个测试中呈现，它立即呈现登录页面。我怀疑第一个测试会影响第二个测试，但问题是为什么。

我在这里创建了一个对此问题的回复。https://repl.it/@tibetegya/Create-React-App

标签： reactjsjestjsreact-suspensetesting-libraryreact-lazy-load

解决方案

toBeInTheDocument断言该元素存在于文档中，顾名思义：

jest-dom 实用程序库提供 .toBeInTheDocument() 匹配器，可用于断言元素是否在文档正文中。这可能比断言查询结果为空更有意义。

该组件在第二次测试中被渲染为分离container的元素，并且在文档 DOM 中不存在，因此测试失败。

相反，可以使用基本的 Jest 断言，如文档所示：

expect(linkElement).not.toBeNull()

可能没有理由使用自定义容器，除非需要测试组件在分离元素中的工作方式。

推荐阅读