I am trying to integrate MSW into testing for my Vite app with RTK Query and am having issues with the baseUrl
TLDR: I want to make my RTK query base url /api instead of http://localhost:5173/api/auth but it is not working with MSW.
Prior to adding MSW, my authSlice.ts looked like this:
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { User } from './userSlice'
export const authSlice = createApi({
reducerPath: "auth",
baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
tagTypes: ["Auth"],
endpoints: (builder) => ({
getAuth: builder.query<User, void>({
query: () => "/auth",
providesTags: ["Auth"]
}),
}),
});
export const {
useGetAuthQuery,
} = authSlice;
export type useGetAuthQueryResult = ReturnType<typeof useGetAuthQuery>
The main thing to note is that everything works as expected with the baseUrl set to /api
However, when I included MSW, it didn't work until I updated the baseURL to http://localhost:5173/api
Here is my MSW setup:
import { User } from '../../Store/RTK/userSlice'
import { rest } from 'msw'
import { setupServer } from 'msw/node'
export const handlers = [
rest.get('http://localhost:5173/api/users', (_, res, ctx) => {
const testUser: Partial<User> = {
id: '1',
username: 'test user'
}
return res(
ctx.status(200),
ctx.json([testUser])
)
}),
rest.get('http://localhost:5173/api/auth', (_, res, ctx) => {
const testAuthUser: Partial<User> = {
id: '0',
username: 'test auth user'
}
return res(
ctx.status(200),
ctx.json(testAuthUser)
)
})
]
export const server = setupServer(...handlers)
The url needs to match my authSlice's baseUrl, but it only works when I use the url http://localhost:5173/api/auth for both. Simply doing /api/auth does not work.
I assume this will be an issue when I deploy the app since I'll probably have to include an env variable or something to make the RTK Query work. Is there a way to make everything work with a baseUrl of /api?
In case relevant, here is my test:
it('sets the auth user', async () => {
renderWithProviders(<HomeWithRouter />);
const serverDataRegex = new RegExp(`test auth user`, 'i');
const serverData = await screen.findByText(serverDataRegex)
expect(serverData).toBeInTheDocument()
})
