|
1 | 1 | import * as React from "react";
|
2 | 2 | import * as TestRenderer from "react-test-renderer";
|
3 | 3 | import type { Path } from "react-router";
|
4 |
| -import { MemoryRouter, Routes, Route, useResolvedPath } from "react-router"; |
| 4 | +import { |
| 5 | + MemoryRouter, |
| 6 | + Routes, |
| 7 | + Route, |
| 8 | + RouterProvider, |
| 9 | + createMemoryRouter, |
| 10 | + useResolvedPath, |
| 11 | + Outlet, |
| 12 | + useParams, |
| 13 | +} from "react-router"; |
5 | 14 |
|
6 | 15 | function ShowResolvedPath({ path }: { path: string | Path }) {
|
7 | 16 | return <pre>{JSON.stringify(useResolvedPath(path))}</pre>;
|
@@ -313,4 +322,98 @@ describe("useResolvedPath", () => {
|
313 | 322 | `);
|
314 | 323 | });
|
315 | 324 | });
|
| 325 | + |
| 326 | + // Follow up test to https://github.com/remix-run/react-router/pull/10983 to |
| 327 | + // ensure we do this consistently across route types |
| 328 | + it("resolves relative paths consistently across route types", async () => { |
| 329 | + let router = createMemoryRouter([ |
| 330 | + { |
| 331 | + path: "/", |
| 332 | + Component: Outlet, |
| 333 | + children: [ |
| 334 | + { |
| 335 | + path: "static/foo", |
| 336 | + Component: () => <p>Static:{useResolvedPath("foo").pathname}</p>, |
| 337 | + }, |
| 338 | + { |
| 339 | + path: "static/foo/foo", |
| 340 | + Component: () => ( |
| 341 | + <p>Static:{useResolvedPath("foo/foo").pathname}</p> |
| 342 | + ), |
| 343 | + }, |
| 344 | + { |
| 345 | + path: "dynamic/:param", |
| 346 | + Component: () => <p>Dynamic:{useResolvedPath("foo").pathname}</p>, |
| 347 | + }, |
| 348 | + { |
| 349 | + path: "dynamic/:param1/:param2", |
| 350 | + Component: () => ( |
| 351 | + <p>Dynamic:{useResolvedPath("foo/foo").pathname}</p> |
| 352 | + ), |
| 353 | + }, |
| 354 | + { |
| 355 | + path: "splat/*", |
| 356 | + Component: () => ( |
| 357 | + <p>Splat:{useResolvedPath(useParams()["*"]).pathname}</p> |
| 358 | + ), |
| 359 | + }, |
| 360 | + ], |
| 361 | + }, |
| 362 | + ]); |
| 363 | + |
| 364 | + let renderer: TestRenderer.ReactTestRenderer; |
| 365 | + TestRenderer.act(() => { |
| 366 | + renderer = TestRenderer.create(<RouterProvider router={router} />); |
| 367 | + }); |
| 368 | + // @ts-expect-error |
| 369 | + if (!renderer) throw new Error("renderer not defined"); |
| 370 | + |
| 371 | + await TestRenderer.act(() => router.navigate("/static/foo")); |
| 372 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 373 | + <p> |
| 374 | + Static: |
| 375 | + /static/foo/foo |
| 376 | + </p> |
| 377 | + `); |
| 378 | + |
| 379 | + await TestRenderer.act(() => router.navigate("/dynamic/foo")); |
| 380 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 381 | + <p> |
| 382 | + Dynamic: |
| 383 | + /dynamic/foo/foo |
| 384 | + </p> |
| 385 | + `); |
| 386 | + |
| 387 | + await TestRenderer.act(() => router.navigate("/splat/foo")); |
| 388 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 389 | + <p> |
| 390 | + Splat: |
| 391 | + /splat/foo/foo |
| 392 | + </p> |
| 393 | + `); |
| 394 | + |
| 395 | + await TestRenderer.act(() => router.navigate("/static/foo/foo")); |
| 396 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 397 | + <p> |
| 398 | + Static: |
| 399 | + /static/foo/foo/foo/foo |
| 400 | + </p> |
| 401 | + `); |
| 402 | + |
| 403 | + await TestRenderer.act(() => router.navigate("/dynamic/foo/foo")); |
| 404 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 405 | + <p> |
| 406 | + Dynamic: |
| 407 | + /dynamic/foo/foo/foo/foo |
| 408 | + </p> |
| 409 | + `); |
| 410 | + |
| 411 | + await TestRenderer.act(() => router.navigate("/splat/foo/foo")); |
| 412 | + expect(renderer.toJSON()).toMatchInlineSnapshot(` |
| 413 | + <p> |
| 414 | + Splat: |
| 415 | + /splat/foo/foo/foo/foo |
| 416 | + </p> |
| 417 | + `); |
| 418 | + }); |
316 | 419 | });
|
0 commit comments