RTK Query and msw testing - create mocked endpoints easily

[andyl-ioki]

Hej there!

First of all: Thanks for maintaining and providing this amazing library. It helps a lot 👍

Currently we are migrating to RTK Query and in this steps we are also migrating the tests so that they use msw mocked endpoints. So far so good.

What bothers me: We have lots of endpoints and lots of different cases to mock. So this results in lots of repetitive code, which is not really maintainer friendly 😅

An idea would be a function that takes any endpoint from RTK Query and a response value. It then returns a msw HttpHandler, which you can integrate in your tests:
const mockEndpoint = (endpoint: QueryDefinition | MutationDefinition, resolver: HttpResponseResolver): HttpHandler ...

The problem with this idea is that (as far as I got it): I can't access the RTKQ endpoints build data/parameters. Am I right or did I miss something?

Alternatively I could create objects which contain those data and pass them to RTKQ and MSW - but it looks a bit overwhelming and less maintainable than just "extracting" the data from RTK Query builders.

---

Example:

// API definition
export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
  }),
});

// Createing the msw HttpHandler with endpoint and the HttpResponse resolver as parameters
const pokemonByNameHandler = mockEndpoint(pokemonApi.endpoints.getPokemonByName, () => HttpResponse.json({ name: "pikachu", order:123, ... });

// Using the HttpHandler
test(
  "should show pikachu as result, when user searches for pikachu",
  server.boundary(async () => {
    // Arrange
    server.use(pokemonByNameHandler)
    // more to arrange ...
    
    // Act
    // type "Pikachu"
    // press "search

    // Assert
    // "Pikachu" is shown
  })
);

[EskiMojo14]

how would you take (name) => `pokemon/${name}` and get "pokemon/:name"?

[EskiMojo14]

i would highly recommend against any fn.toString() parsing, it seems incredibly fragile. as a result, I don't think exposing the builder information is actually helpful, and am against it.

[EskiMojo14]

@andyl-ioki different idea:
https://github.com/EskiMojo14/msw-rtk-query/blob/main/src/module.ts#L128

not quite as powerful in terms of types and duplication, but at least you're only defining endpoints once

[andyl-ioki]

Wow, at a first glance this looks super nice 👍
I think I will try this next week in our repo and let you know about our experience with it 🙏

[anotheri]

@EskiMojo14 first of all thanks for example you've provided, I like the idea and i'm wondering if that approach can be combined with @rtk-query/codegen-openapi? it seems it doesn't provide now a way to extend generated configuration with extra data like: mock: { path: "/pokemon", method: "get", }

[EskiMojo14]

not too familiar with how the codegen works, sorry