[Feature]: Method to run Node as well as Browser code for component tests (e.g. BFF / Remix)

[MattyBalaam]

🚀 Feature Request

It appears that the current experimental compoenent testing only runs code in a browser environment, so if you try to run any node code then you will get errors.

I feel like these component tests could also make sense to create tests for remix as outlined here: https://remix.run/docs/en/main/other-api/testing#remix-runtesting where you can stub out the BFF server-side code for remix loaders and actions and have access to remix’s built-in hooks.

Example

const RouteComponent = () => {
  const {id} = useLoaderData<typeof loader>();

  return id ? <p>{id}</p> : null
};

_________

import crypto from 'node:crypto';

  test("gets a node generated value from server", async ({ mount }) => {
`  const StubbedComponent = createRemixStub([
    {
      path: "/",
      Component: RouteComponent,
      async loader({ request }) {
        "use server";
        const id = crypto.randomUUID(); // Oh dear - this will break the test

        return json(
          { id },
        );
      },
    },
  ]);`
  
  const component = await mount(<StubbedComponent />);
   …
 });

Motivation

For our FE this would allow us to create integration tests using the same testing tools as simple UI components, instead of needing to use something like jest or similar.

[MattyBalaam]

@pavelfeldman I have seen elsewhere you might be looking at moving component tests out of experimental and I wondered if you had any opinions or suggestions?

I was also wondering if this might be something that could be accomplished at a vite plugin level.