docs(react testing): Update testing docs to demo nested route fields (#15069)

This documents some new nested-route fields that were added in
getsentry/sentry#100481

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Extend RTL testing docs with outlet context configuration and nested
routes examples, plus a clarified route param section.
> 
> - **Docs (Using React Testing Library)**:
> - **Route Param Values**: Add a dedicated heading and example
clarifying use of `route` for `useParams()`.
> - **Outlet Context**: Document passing
`initialRouterConfig.outletContext` and consuming via
`useOutletContext()`.
>   - **Nested Routes**:
> - Show configuring an in-memory route tree via
`initialRouterConfig.children`.
> - Add wrapper `Outlet` with typed context and custom hook, plus
examples for index and param child routes.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c139854. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ryan953

develop-docs/frontend/using-rtl.mdx

@@ -77,6 +77,8 @@ router.navigate('/new/path/');
 router.navigate(-1); // Simulates clicking the back button
 ```
 
+### Route Param Values
+
 If you need to test route param values (as in `useParams()`), the `route` will need to be provided in the config:
 
 ```tsx
@@ -97,6 +99,106 @@ const {router} = render(<TestComponent />, {
 expect(screen.getByText('123')).toBeInTheDocument();
 ```
 
+### Outlet Context
+
+If you need to test outlet param values (as in `useOutletContext()`), you can pass them inside the `initialRouterConfig` object.
+
+```tsx
+function TestComponent() {
+  const { id } = useOutletContext();
+  return <div>{id}</div>;
+}
+
+const { router } = render(<TestComponent />, {
+  initialRouterConfig: {
+    outletContext: { id: '123' },
+  },
+});
+
+expect(screen.getByText('123')).toBeInTheDocument();
+```
+
+### Nested Routes
+
+If directly setting outlet context isn't enough, instead you want to render some nested routes you can do that too!
+
+Suppose routes.tsx defines some nested routes like:
+```tsx
+{
+  path: 'settings/',
+  component: SettingsWrapper,
+  children: [
+    {index: true, component: SettingsIndex},
+    {path: ':projectId/', component: ProjectSettings},
+  ]
+}
+```
+
+We can configure the in-memory router to know about just the route tree that you need. Remember to render the wrapper component itself, and the router + route child components will render themsevles.
+```tsx
+// settingsWrapper.tsx
+interface OutletContext {
+  name: string;
+}
+
+export function useCustomOutletContext() {
+  return useOutletContext<OutletContext>();
+}
+
+export default function SettingsWrapper() {
+  const context: OutletContext = {name: "Default"};
+  return <Outlet context={context} />;
+}
+
+// settingsIndex.tsx
+function SettingsIndex() {
+  const {name} = useCustomOutletContext();
+  return <div>Settings > {name}</div>;
+}
+
+// projectSettings.tsx
+function ProjectSettings() {
+  const {name} = useCustomOutletContext();
+  const {projectId} = useParams();
+  return <div>Settings > {name} > Project: {projectId}</div>;
+}
+
+// settingsIndex.spec.tsx
+render(<SettingsWrapper />, {
+  initialRouterConfig: {
+    location: {
+      pathname: '/settings/',
+    },
+    route: '/settings/',
+    children: [
+      {
+        index: true,
+        element: <SettingsIndex />,
+      },
+    ],
+  },
+});
+expect(screen.getByText('Settings > Default')).toBeInTheDocument();
+
+// projectSettings.spec.tsx
+render(<SettingsWrapper />, {
+  initialRouterConfig: {
+    location: {
+      pathname: '/settings/123/',
+    },
+    route: '/settings/:projectId',
+    children: [
+      {
+        path: ':projectId/',
+        element: <ProjectSettings />,
+      },
+    ],
+  },
+});
+expect(screen.getByText('Settings > Default > Project: 123')).toBeInTheDocument();
+```
+
+
 ## Querying
 
 - use `getBy...` as much as possible