Приветствую!
При 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();
});
