feat(remix-testing): cast types to use Remix type definitions + allow passing context

.changeset/testing-helper-context-and-types.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/testing": patch
+---
+
+feat(remix-testing): cast types to use Remix type definitions + allow passing context

packages/remix-testing/__tests__/stub-test.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { unstable_createRemixStub } from "@remix-run/testing";
 import { Outlet, useLoaderData, useMatches } from "@remix-run/react";
+import type { DataFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 test("renders a route", () => {
@@ -65,6 +66,67 @@ test("loaders work", async () => {
   );
 });
 
+test("can pass a predefined loader", () => {
+  async function loader(_args: DataFunctionArgs) {
+    return json({ hi: "there" });
+  }
+
+  unstable_createRemixStub([
+    {
+      path: "/example",
+      loader,
+    },
+  ]);
+});
+
+test("can pass context values", async () => {
+  function App() {
+    let data = useLoaderData();
+    return (
+      <div>
+        <pre data-testid="root">Context: {data.context}</pre>;
+        <Outlet />
+      </div>
+    );
+  }
+
+  function Hello() {
+    let data = useLoaderData();
+    return <pre data-testid="hello">Context: {data.context}</pre>;
+  }
+
+  let RemixStub = unstable_createRemixStub(
+    [
+      {
+        path: "/",
+        element: <App />,
+        loader({ context }) {
+          return json(context);
+        },
+        children: [
+          {
+            path: "hello",
+            element: <Hello />,
+            loader({ context }) {
+              return json(context);
+            },
+          },
+        ],
+      },
+    ],
+    { context: "hello" }
+  );
+
+  render(<RemixStub initialEntries={["/hello"]} />);
+
+  expect(await screen.findByTestId("root")).toHaveTextContent(
+    /context: hello/i
+  );
+  expect(await screen.findByTestId("hello")).toHaveTextContent(
+    /context: hello/i
+  );
+});
+
 test("all routes have ids", () => {
   function Home() {
     let matches = useMatches();

packages/remix-testing/create-remix-stub.tsx

@@ -9,8 +9,18 @@ import type {
   UNSAFE_RouteModules as RouteModules,
   UNSAFE_RemixContextObject as RemixContextObject,
 } from "@remix-run/react";
-import type { DataRouteObject, RouteObject } from "react-router-dom";
+import type {
+  DataRouteObject,
+  IndexRouteObject,
+  NonIndexRouteObject,
+  RouteObject,
+} from "react-router-dom";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import type {
+  ActionFunction,
+  AppLoadContext,
+  LoaderFunction,
+} from "@remix-run/server-runtime";
 
 type RemixStubOptions = {
   /**
@@ -42,7 +52,55 @@ type RemixStubOptions = {
   remixConfigFuture?: Partial<FutureConfig>;
 };
 
-export function createRemixStub(routes: (RouteObject | DataRouteObject)[]) {
+function patchRoutesWithContext(
+  routes: (StubRouteObject | StubDataRouteObject)[],
+  context: AppLoadContext
+): (RouteObject | DataRouteObject)[] {
+  return routes.map((route) => {
+    if (route.loader) {
+      let loader = route.loader;
+      route.loader = (args) => loader({ ...args, context });
+    }
+
+    if (route.action) {
+      let action = route.action;
+      route.action = (args) => action({ ...args, context });
+    }
+
+    if (route.children) {
+      return {
+        ...route,
+        children: patchRoutesWithContext(route.children, context),
+      };
+    }
+
+    return route as RouteObject | DataRouteObject;
+  }) as (RouteObject | DataRouteObject)[];
+}
+
+interface StubIndexRouteObject
+  extends Omit<IndexRouteObject, "loader" | "action"> {
+  loader?: LoaderFunction;
+  action?: ActionFunction;
+}
+
+interface StubNonIndexRouteObject
+  extends Omit<NonIndexRouteObject, "loader" | "action"> {
+  loader?: LoaderFunction;
+  action?: ActionFunction;
+}
+
+type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
+
+type StubDataRouteObject = StubRouteObject & {
+  children?: DataRouteObject[];
+  id: string;
+};
+
+export function createRemixStub(
+  routes: (StubRouteObject | StubDataRouteObject)[],
+  context: AppLoadContext = {}
+) {
   return function RemixStub({
     initialEntries,
     initialIndex,
@@ -53,7 +111,10 @@ export function createRemixStub(routes: (RouteObject | DataRouteObject)[]) {
     let remixContextRef = React.useRef<RemixContextObject>();
 
     if (routerRef.current == null) {
-      routerRef.current = createMemoryRouter(routes, {
+      // update the routes to include context in the loader/action
+      let patched = patchRoutesWithContext(routes, context);
+
+      routerRef.current = createMemoryRouter(patched, {
         initialEntries,
         initialIndex,
         hydrationData,