Почему загрузчик не отображается во втором тесте, когда я запускаю один и тот же тест дважды в шутку, используя библиотеку тестирования реакции, response.lazy и Suspense?

Question

Вот образец моего кода

// 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

Answer 1

toBeInTheDocument утверждает, что элемент существует в документе, как следует из названия:

Библиотека утилит jest-dom предоставляет средство сопоставления.toBeInTheDocument(), которое можно использовать для подтверждения того, что элемент находится в теле документа или нет. Это может быть более значимым, чем утверждение, что результат запроса равен нулю.

Компонент был отрисован как отсоединенный container элемент во втором тесте и не существует в документе DOM, поэтому тест не проходит.

Вместо этого можно использовать базовые утверждения Jest, как предлагает документация:

expect(linkElement).not.toBeNull()

Может не быть причин использовать настраиваемый контейнер, если нет необходимости тестировать, как компонент работает в отдельных элементах.