There's any way to use MSW and createRemixStub helper?

[pauloricardos]

First of all, i'm new using Remix framework, so maybe there's a better approach.

I want to test my root component, which uses the useLoaderData hook, then calls my internal httpClient and then an external endpoint using MSW. If i just call createRemixStub and return a mock of data on the loader parameter, works fine, but i want to test it using MSW. I already tried to mock useLoaderData itself using vitest, but it seems the same thing using createRemixStub.

There's any way to assert the behavior of rendering a list of data using MSW and createRemixStub? Or a better way to server render my data?

Here's my component and related files:

_index.tsx

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const pokemons = await retrievePokemons({
    page: '0',
    pageSize: '200',
  })

  return json(pokemons);
}

export default function Index() {
  const pokemons = useLoaderData<typeof loader>();

  return (
    <>
      <BrowsePokemons pokemons={pokemons} />
    </>
  );
}

retrievePokemons.server.ts

export const retrievePokemons = async ({
  page,
  pageSize,
}: FindAllPokemonsParams): Promise<Pokemons> => {
  const httpClient = new HttpClient();

  const response: Pokemons = await httpClient.get('/v1/pokemons', {
    params: {
      page,
      pageSize,
    },
  });

  return response;
};

import { HttpResponse, http } from 'msw';

export const handlers = [
  http.get('http://localhost:3001/api/v1/pokemons', () => {
    console.log('Captured a "GET /posts" request')
    return HttpResponse.error()
  }),
];

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

server.events.on('request:start', ({ request }) => {
  console.log('MSW intercepted:', request.method, request.url)
})

import { beforeAll, afterAll, afterEach } from 'vitest';
import { server } from './mocks/server';

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

[pauloricardos]

up