Use routes.ts with other Vite-based tools like Vitest and Storybook

[aaronadamsCA]

Edit: This was originally a question, but as @lhapaipai pointed out below, the Remix Vite plugin didn't work with other Vite-based tools like Vitest and Storybook. I assume that's still the case with React Router 7, so I'm rewriting this as a feature request.

---

I'd like to use routes.ts with other Vite-based tools like Vitest, Testing Library, and Storybook.

Imagine a minimal app where the root route loader returns a value, and the index route component renders it. I'd like to write a test to ensure that routes.ts correctly integrates the two route modules.

It feels like it should be this simple, and the types seem to be compatible:

import routes from "#app/routes.js";

test("index route renders root route loader data", () => {
  const Stub = createRoutesStub(routes);

  render(<Stub />);

  expect(screen.getByText("HOME")).toBeInTheDocument();
});

But this currently fails, with an error message that doesn't make much sense:

Error: The React Router Vite plugin requires the use of a Vite config file

In Remix you could do this kind of thing, but only by recreating your entire route tree in a stub. This was annoying, but it also made a certain kind of sense, since the actual Remix route manifest was an internal concern.

In React Router, routes.ts is a required part of every framework app. If we could create a stub from it, we could use that stub to render any path in the route tree in our tests and stories, which would be great for the developer experience.

[lhapaipai]

Hi @aaronadamsCA ,
like you i am trying to implement vitest with react router v7.
here are some ideas to explore, but i may also make mistakes in my answers.
first the vite plugin for remix was not compatible with vitest, so i think it is still the case: https://remix.run/docs/en/main/guides/vite#plugin-usage-with-other-vite-based-tools-eg-vitest-storybook

// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vitest/config";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [!process.env.VITEST && reactRouter(), tsconfigPaths()],
  test: {
    environment: "jsdom",
    css: false,
    setupFiles: ["./vitest.setup.ts"],
  },
});

I don't know if we can use the route, index functions from the @react-router/dev/routes package
#12185 (comment)

I can get it to work the old way

// about.tsx
import { useLoaderData } from "react-router";

export function loader() {
  return {
    foo: "baz",
  };
}

export default function Component() {
  const loaderData = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>{loaderData.foo}</h1>
    </div>
  );
}

// sandbox.test.tsx
import { createRoutesStub } from "react-router";
import { test } from "vitest";
import About from "./routes/about";
import { render, screen } from "@testing-library/react";

test("about page", async () => {
  const Stub = createRoutesStub([
    {
      path: "/about",
      Component: About,
      loader() {
        return {
          foo: "bar",
        };
      },
    },
  ]);

  render(<Stub initialEntries={["/about"]} />);

  await screen.findByRole("heading");

  screen.debug();
});

but unfortunately not with new route typing

import type { Route } from "./+types/about";

export function loader() {
  return {
    foo: "baz",
  };
}

export default function Component({ loaderData }: Route.ComponentProps) {
  return (
    <div>
      <h1>{loaderData.foo}</h1>
    </div>
  );
}

[aaronadamsCA]

Thanks @lhapaipai, I wasn't aware of that Remix limitation. I'll copy-paste it here to help with search:

Plugin usage with other Vite-based tools (e.g. Vitest, Storybook)

The Remix Vite plugin is only intended for use in your application's development server and production builds. While there are other Vite-based tools such as Vitest and Storybook that make use of the Vite config file, the Remix Vite plugin has not been designed for use with these tools. We currently recommend excluding the plugin when used with other Vite-based tools.

I certainly hope there's a plan to resolve this so we can use our actual route manifest with Vitest and Storybook.

Our current workaround is to recreate the entire route tree in a Remix stub that imports the actual modules, but your post seems to suggest there's currently a dead end there too, since the new route typing isn't working with the stub.