Testing React Router 7 components in Vitest browser mode fails due to server-side imports

[bairdj]

React Router has built in removal of server code when running a client build, which works fine when running the dev server or production builds.

I am having an issue when using Vitest browser mode to try and test the Component (aka the default export) for a route entry point. In this scenario, Vitest imports the file without the transformation, thus it keeps the server side imports in even though they will not be tested in this environment. Even though the tests don't call the loader and action exports, the tree shaking does not strip them so any imports that are server-side only (e.g. Prisma, session handling etc.) get imported which breaks the tests because they call Node-only functions. I only want to be able to test the Component in isolation, to test that it behaves as expected for given loaderData and actionData.

There are alternatives to test this:

• Run the tests in Node using jsdom etc., but this means that browser mode can't be used which undermines the whole point of it
• Split out the component into a separate file and call this from the route entry point. This is suboptimal as a key feature of RR7 is that the component and the backend functions can be in the same file.
• Mock everything - but this seems like a poor way to handle it

I dug into the RR Vite plugin and saw that it does some transformation with the presence of ?__react-router-build-client-route, so I tried manually triggering this in my browser test case with

import { describe, expect, it } from "vitest";
import Landing from "~/routes/app/landing?__react-router-build-client-route";
import { render } from "vitest-browser-react";

But this does not seem to trigger the server code removal e.g.

Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in ``).

I've tried various configurations of the testTransformMode to toggle SSR on and off without luck. I tried forcing the test environment to "client" which is referenced in the Vite plugin source - doesn't work. I feel like there should be some way via config to trigger the correct mode for the RR Vite plugin, without reaching for the next step which would be some sort of custom Vite plugin which would reimplement this part of the RR Vite plugin.

Has anyone found a solution to testing React Router 7 routes with server-side imports in Vitest browser mode without splitting the component?

[ibratoev]

I hit the same problem. @bairdj did you find a workaround?
I agree with you that there should be an easy way to configure that.

[mecab]

@bairdj I hit the same problem, but thanks to unplugin-strip-exports plugin, I managed to strip the loaders and actions (and dependencies used by them) which enables Vitest to test the RR route components in the browser mode.

I think what I did is basically what you were thinking as:

... the next step which would be some sort of custom Vite plugin which would reimplement this part of the RR Vite plugin.

but there was existing one that does the job. But yeah I agree it would be nicer if there is the way to do this by RR itself.

I paste my vitest config. (Obviously, it's using defineProject as I am using with the project but it should be same with defineConfig)

import { defineProject, mergeConfig } from 'vitest/config';
import { playwright } from '@vitest/browser-playwright';
import StripExports from 'unplugin-strip-exports/vite';
import viteConfig from './vite.config';

export default mergeConfig(
  viteConfig,
  defineProject({
    test: {
      name: 'browser',
      globals: true,
      browser: {
        enabled: true,
        provider: playwright(),
        instances: [
          { browser: 'chromium' },
        ],
      },
      include: ['test/browser/**/*.test.tsx'],
      setupFiles: ['test/browser/setup.ts']
    },
    plugins: [
      StripExports({
        match() {
          return ['loader', 'action'];
        }
      }),
    ]
  })
);