Skip to content

Commit 1ab7d52

Browse files
brophdawg11brophdawg11
committed
Move to a prop on RouterProvider
1 parent ee38f76 commit 1ab7d52

File tree

5 files changed

+184
-167
lines changed

5 files changed

+184
-167
lines changed

‎integration/browser-entry-test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,11 @@ test("allows users to pass a handleError function to HydratedRouter", async ({
175175

176176
let appFixture = await createAppFixture(fixture);
177177
let app = new PlaywrightFixture(appFixture, page);
178+
178179
await app.goto("/", true);
179180
await page.click('a[href="/page"]');
180181
await page.waitForSelector("[data-error]");
182+
181183
expect(await app.getHtml()).toContain("Error: Render error");
182184
expect(logs.length).toBe(2);
183185
// First one is react logging the error

‎packages/react-router/__tests__/dom/handle-error-test.tsx‎

Lines changed: 126 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import { act, fireEvent, render, waitFor } from "@testing-library/react";
22
import * as React from "react";
33

4-
import {
5-
Outlet,
6-
RouterProvider,
7-
createMemoryRouter,
8-
useFetcher,
9-
} from "../../index";
4+
import { RouterProvider, createMemoryRouter, useFetcher } from "../../index";
105

116
import getHtml from "../utils/getHtml";
127
import { createFormData } from "../router/utils/utils";
@@ -24,27 +19,24 @@ describe(`handleError`, () => {
2419

2520
it("handles navigation loader errors", async () => {
2621
let spy = jest.fn();
27-
let router = createMemoryRouter(
28-
[
29-
{
30-
path: "/",
31-
Component: () => <h1>Home</h1>,
32-
},
33-
{
34-
path: "/page",
35-
loader() {
36-
throw new Error("loader error!");
37-
},
38-
Component: () => <h1>Page</h1>,
39-
ErrorBoundary: () => <h1>Error</h1>,
40-
},
41-
],
22+
let router = createMemoryRouter([
4223
{
43-
unstable_handleError: spy,
24+
path: "/",
25+
Component: () => <h1>Home</h1>,
4426
},
45-
);
27+
{
28+
path: "/page",
29+
loader() {
30+
throw new Error("loader error!");
31+
},
32+
Component: () => <h1>Page</h1>,
33+
ErrorBoundary: () => <h1>Error</h1>,
34+
},
35+
]);
4636

47-
let { container } = render(<RouterProvider router={router} />);
37+
let { container } = render(
38+
<RouterProvider router={router} unstable_handleError={spy} />,
39+
);
4840

4941
await act(() => router.navigate("/page"));
5042

@@ -62,27 +54,24 @@ describe(`handleError`, () => {
6254

6355
it("handles navigation action errors", async () => {
6456
let spy = jest.fn();
65-
let router = createMemoryRouter(
66-
[
67-
{
68-
path: "/",
69-
Component: () => <h1>Home</h1>,
70-
},
71-
{
72-
path: "/page",
73-
action() {
74-
throw new Error("action error!");
75-
},
76-
Component: () => <h1>Page</h1>,
77-
ErrorBoundary: () => <h1>Error</h1>,
78-
},
79-
],
57+
let router = createMemoryRouter([
8058
{
81-
unstable_handleError: spy,
59+
path: "/",
60+
Component: () => <h1>Home</h1>,
8261
},
83-
);
62+
{
63+
path: "/page",
64+
action() {
65+
throw new Error("action error!");
66+
},
67+
Component: () => <h1>Page</h1>,
68+
ErrorBoundary: () => <h1>Error</h1>,
69+
},
70+
]);
8471

85-
let { container } = render(<RouterProvider router={router} />);
72+
let { container } = render(
73+
<RouterProvider router={router} unstable_handleError={spy} />,
74+
);
8675

8776
await act(() =>
8877
router.navigate("/page", {
@@ -105,25 +94,22 @@ describe(`handleError`, () => {
10594

10695
it("handles fetcher loader errors", async () => {
10796
let spy = jest.fn();
108-
let router = createMemoryRouter(
109-
[
110-
{
111-
path: "/",
112-
Component: () => <h1>Home</h1>,
113-
},
114-
{
115-
path: "/fetch",
116-
loader() {
117-
throw new Error("loader error!");
118-
},
119-
},
120-
],
97+
let router = createMemoryRouter([
12198
{
122-
unstable_handleError: spy,
99+
path: "/",
100+
Component: () => <h1>Home</h1>,
123101
},
124-
);
102+
{
103+
path: "/fetch",
104+
loader() {
105+
throw new Error("loader error!");
106+
},
107+
},
108+
]);
125109

126-
let { container } = render(<RouterProvider router={router} />);
110+
let { container } = render(
111+
<RouterProvider router={router} unstable_handleError={spy} />,
112+
);
127113

128114
await act(() => router.fetch("key", "0", "/fetch"));
129115

@@ -141,25 +127,22 @@ describe(`handleError`, () => {
141127

142128
it("handles fetcher action errors", async () => {
143129
let spy = jest.fn();
144-
let router = createMemoryRouter(
145-
[
146-
{
147-
path: "/",
148-
Component: () => <h1>Home</h1>,
149-
},
150-
{
151-
path: "/fetch",
152-
action() {
153-
throw new Error("action error!");
154-
},
155-
},
156-
],
130+
let router = createMemoryRouter([
157131
{
158-
unstable_handleError: spy,
132+
path: "/",
133+
Component: () => <h1>Home</h1>,
159134
},
160-
);
135+
{
136+
path: "/fetch",
137+
action() {
138+
throw new Error("action error!");
139+
},
140+
},
141+
]);
161142

162-
let { container } = render(<RouterProvider router={router} />);
143+
let { container } = render(
144+
<RouterProvider router={router} unstable_handleError={spy} />,
145+
);
163146

164147
await act(() =>
165148
router.fetch("key", "0", "/fetch", {
@@ -182,26 +165,23 @@ describe(`handleError`, () => {
182165

183166
it("handles render errors", async () => {
184167
let spy = jest.fn();
185-
let router = createMemoryRouter(
186-
[
187-
{
188-
path: "/",
189-
Component: () => <h1>Home</h1>,
190-
},
191-
{
192-
path: "/page",
193-
Component: () => {
194-
throw new Error("render error!");
195-
},
196-
ErrorBoundary: () => <h1>Error</h1>,
197-
},
198-
],
168+
let router = createMemoryRouter([
199169
{
200-
unstable_handleError: spy,
170+
path: "/",
171+
Component: () => <h1>Home</h1>,
201172
},
202-
);
173+
{
174+
path: "/page",
175+
Component: () => {
176+
throw new Error("render error!");
177+
},
178+
ErrorBoundary: () => <h1>Error</h1>,
179+
},
180+
]);
203181

204-
let { container } = render(<RouterProvider router={router} />);
182+
let { container } = render(
183+
<RouterProvider router={router} unstable_handleError={spy} />,
184+
);
205185

206186
await act(() => router.navigate("/page"));
207187

@@ -221,42 +201,39 @@ describe(`handleError`, () => {
221201

222202
it("doesn't double report on state updates during an error boundary from a data error", async () => {
223203
let spy = jest.fn();
224-
let router = createMemoryRouter(
225-
[
226-
{
227-
path: "/",
228-
Component: () => <h1>Home</h1>,
229-
},
230-
{
231-
path: "/page",
232-
loader() {
233-
throw new Error("loader error!");
234-
},
235-
Component: () => <h1>Page</h1>,
236-
ErrorBoundary() {
237-
let fetcher = useFetcher();
238-
return (
239-
<>
240-
<h1>Error</h1>
241-
<button onClick={() => fetcher.load("/fetch")}>Fetch</button>
242-
<p>{fetcher.data}</p>
243-
</>
244-
);
245-
},
204+
let router = createMemoryRouter([
205+
{
206+
path: "/",
207+
Component: () => <h1>Home</h1>,
208+
},
209+
{
210+
path: "/page",
211+
loader() {
212+
throw new Error("loader error!");
246213
},
247-
{
248-
path: "/fetch",
249-
loader() {
250-
return "FETCH";
251-
},
214+
Component: () => <h1>Page</h1>,
215+
ErrorBoundary() {
216+
let fetcher = useFetcher();
217+
return (
218+
<>
219+
<h1>Error</h1>
220+
<button onClick={() => fetcher.load("/fetch")}>Fetch</button>
221+
<p>{fetcher.data}</p>
222+
</>
223+
);
252224
},
253-
],
225+
},
254226
{
255-
unstable_handleError: spy,
227+
path: "/fetch",
228+
loader() {
229+
return "FETCH";
230+
},
256231
},
257-
);
232+
]);
258233

259-
let { container } = render(<RouterProvider router={router} />);
234+
let { container } = render(
235+
<RouterProvider router={router} unstable_handleError={spy} />,
236+
);
260237

261238
await act(() => router.navigate("/page"));
262239

@@ -279,41 +256,38 @@ describe(`handleError`, () => {
279256

280257
it("doesn't double report on state updates during an error boundary from a render error", async () => {
281258
let spy = jest.fn();
282-
let router = createMemoryRouter(
283-
[
284-
{
285-
path: "/",
286-
Component: () => <h1>Home</h1>,
287-
},
288-
{
289-
path: "/page",
290-
Component: () => {
291-
throw new Error("render error!");
292-
},
293-
ErrorBoundary() {
294-
let fetcher = useFetcher();
295-
return (
296-
<>
297-
<h1>Error</h1>
298-
<button onClick={() => fetcher.load("/fetch")}>Fetch</button>
299-
<p>{fetcher.data}</p>
300-
</>
301-
);
302-
},
259+
let router = createMemoryRouter([
260+
{
261+
path: "/",
262+
Component: () => <h1>Home</h1>,
263+
},
264+
{
265+
path: "/page",
266+
Component: () => {
267+
throw new Error("render error!");
303268
},
304-
{
305-
path: "/fetch",
306-
loader() {
307-
return "FETCH";
308-
},
269+
ErrorBoundary() {
270+
let fetcher = useFetcher();
271+
return (
272+
<>
273+
<h1>Error</h1>
274+
<button onClick={() => fetcher.load("/fetch")}>Fetch</button>
275+
<p>{fetcher.data}</p>
276+
</>
277+
);
309278
},
310-
],
279+
},
311280
{
312-
unstable_handleError: spy,
281+
path: "/fetch",
282+
loader() {
283+
return "FETCH";
284+
},
313285
},
314-
);
286+
]);
315287

316-
let { container } = render(<RouterProvider router={router} />);
288+
let { container } = render(
289+
<RouterProvider router={router} unstable_handleError={spy} />,
290+
);
317291

318292
await act(() => router.navigate("/page"));
319293

0 commit comments

Comments
 (0)