@mikhavital

Как протестировать Lazy-компонент с Suspense внутри которого Suspense с помощью testing-library?

Приветствую!

При screen.debug() мне выдаёт fallback "Suspense App Container " из компонента Container, как мне дождаться подгрузки компонента ProjectsPage? Если уберу задержку, то всё работает, но она нужна) Помогите пожалуйста)

Путь до теста src/test.test.tsx
Codesandbox

Есть компонент RouterProvider, упрощу его для краткости:
import { ProjectsPageLazy as ProjectsPage } from "pages/ProjectsPage/ProjectsPage.lazy";

const RouterProvider = () => {
  return (
    <Suspense fallback="Loading Routes...">
      <Routes>
        <Route
          path="/app"
          element={
            <ProtectedRoute>
              <AppPage />
            </ProtectedRoute>
          }
        >
          <Route path="projects" element={<ProjectsPage />} />
        </Route>
      </Routes>
    </Suspense>
  );
};

В нем есть путь "/app" который направляет на lazy-компонент AppPage, так же его упрощу:
const AppPage = () => {
  return  <Container />
};

В нём находится компонент Container:
const Container = () => {
  return (
      <Suspense fallback={"Suspense App Container"}>
        <Outlet />
      </Suspense>
  );
};

В котором есть Outlet, в который подгружается ProjectPage lazy-компонент с задержкой:
const ProjectsPageLazy = lazy(async () => {
  return Promise.all([
    import("./ProjectsPage"),
    new Promise((resolve) => setTimeout(resolve, 2000)),
  ]).then(([moduleExports]) => moduleExports);
});

const ProjectsPage = () => {
  return <span>ProjectsPage</span>
};


Мой код для тестирования:
function ComponentRender(component,  options = {}) {
  const { route = "/app/dashboard", initialState = {} } = options;

  return render(
        <MemoryRouter initialEntries={[route]}>{component}</MemoryRouter>,
  );
}

/* RouterProvider.test.tsx  */
  test("Projects Route", async () => {
    await act(() => ComponentRender(<RouterProvider />, { route: "/app/projects" }));

    screen.debug();
  });
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
WblCHA
@WblCHA
await waitFor(() => screen.getByText('Projects'), {
        timeout: 3000
      })

Но таймаут и тут и там можно смело меньше сделать (или вообще убрать), нет смысла лишний раз ждать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы