65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import { lazy } from "react";
|
|
import { act, cleanup, render, screen } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { LazyContent } from "../src/components/LazyContent";
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
describe("LazyContent", () => {
|
|
it("keeps the surrounding app shell visible while a feature chunk loads", async () => {
|
|
let resolveModule: ((module: { default: () => React.JSX.Element }) => void) | undefined;
|
|
const Feature = lazy(
|
|
() =>
|
|
new Promise<{ default: () => React.JSX.Element }>((resolve) => {
|
|
resolveModule = resolve;
|
|
})
|
|
);
|
|
|
|
render(
|
|
<main>
|
|
<h1>Watermaps</h1>
|
|
<LazyContent
|
|
pending={<p role="status">Modul wird geladen …</p>}
|
|
failed={<p role="alert">Modul fehlt.</p>}
|
|
>
|
|
<Feature />
|
|
</LazyContent>
|
|
</main>
|
|
);
|
|
|
|
expect(screen.getByRole("heading", { name: "Watermaps" })).toBeVisible();
|
|
expect(screen.getByRole("status")).toHaveTextContent("Modul wird geladen");
|
|
|
|
await act(async () => {
|
|
resolveModule?.({ default: () => <section>Funktion bereit</section> });
|
|
});
|
|
|
|
expect(await screen.findByText("Funktion bereit")).toBeVisible();
|
|
expect(screen.queryByRole("status")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("contains a failed lazy import inside its local fallback", async () => {
|
|
vi.spyOn(console, "error").mockImplementation(() => undefined);
|
|
const BrokenFeature = lazy(() => Promise.reject(new Error("Chunk fehlt")));
|
|
|
|
render(
|
|
<main>
|
|
<h1>Watermaps</h1>
|
|
<LazyContent
|
|
pending={<p role="status">Modul wird geladen …</p>}
|
|
failed={<p role="alert">Modul konnte nicht geladen werden.</p>}
|
|
>
|
|
<BrokenFeature />
|
|
</LazyContent>
|
|
</main>
|
|
);
|
|
|
|
expect(await screen.findByRole("alert")).toHaveTextContent("nicht geladen");
|
|
expect(screen.getByRole("heading", { name: "Watermaps" })).toBeVisible();
|
|
});
|
|
});
|