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]

@andyl-ioki i hacked together an idea over at https://github.com/EskiMojo14/msw-rtk-query/blob/main/src/index.ts#L113, curious what you think about it

[andyl-ioki]

Hej there!

Big thanks for your efforts!
First I think it's really nice to be able to mock the endpoints with only having to care about the "return" value.

But then seeing it with your example ( 🙏 ), it looks cumbersome to create and maintain. Especially if you are already working with RTK Query for a while. This means to refactor your code to use predefined objects and reuse them in your API creation with the builder.
The object of an endpoint would also create a kind of spaghetti in the code, which becomes then less easy to read and understand (I think).

So I am getting back to the idea of having a way (RTK Query) offers, to access the information we gave to the builder.

---

What are your thoughts about the idea in general?
Also what do you think about both paths to achieve it? :)

[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 🙏