danabra.mov
A tool for people curious about the React Server Components protocol
rscexplorer.dev/
rsc
react
1import { test, expect, beforeAll, afterAll, afterEach } from "vitest";
2import { createHelpers, launchBrowser, type TestHelpers } from "./helpers.ts";
3import type { Browser, Page } from "playwright";
4
5let browser: Browser;
6let page: Page;
7let h: TestHelpers;
8
9beforeAll(async () => {
10 browser = await launchBrowser();
11 page = await browser.newPage();
12 h = createHelpers(page);
13});
14
15afterAll(async () => {
16 await browser.close();
17});
18
19afterEach(async () => {
20 await h.checkNoRemainingSteps();
21});
22
23test("errors sample - error boundary catches thrown error", async () => {
24 await h.load("errors");
25
26 // Step to end - should show error fallback (fetchUser throws)
27 expect(await h.stepAll()).toMatchInlineSnapshot(`
28 "<div>
29 <h1>Error Handling</h1>
30 <ErrorBoundary fallback={
31 <div style={{
32 padding: 16,
33 background: "#fee",
34 borderRadius: 8,
35 color: "#c00"
36 }}>
37 <strong>Failed to load user</strong>
38 <p style={{ margin: "4px 0 0" }}>Please try again later.</p>
39 </div>
40 }>
41 <Suspense fallback={
42 <p>Loading user...</p>
43 }>
44 Pending
45 </Suspense>
46 </ErrorBoundary>
47 </div>"
48 `);
49 expect(await h.preview("Loading user")).toMatchInlineSnapshot(`
50 "Error Handling
51
52 Loading user..."
53 `);
54
55 // After async resolves with error, error boundary catches it
56 expect(await h.stepAll()).toMatchInlineSnapshot(`
57 "<div>
58 <h1>Error Handling</h1>
59 <ErrorBoundary fallback={
60 <div style={{
61 padding: 16,
62 background: "#fee",
63 borderRadius: 8,
64 color: "#c00"
65 }}>
66 <strong>Failed to load user</strong>
67 <p style={{ margin: "4px 0 0" }}>Please try again later.</p>
68 </div>
69 }>
70 <Suspense fallback={
71 <p>Loading user...</p>
72 }>
73 Error: Network error
74 </Suspense>
75 </ErrorBoundary>
76 </div>"
77 `);
78 expect(await h.preview("Failed to load user")).toMatchInlineSnapshot(
79 `
80 "Error Handling
81 Failed to load user
82
83 Please try again later."
84 `,
85 );
86});