我试图将MSW集成到我的Vite应用程序的RTK查询测试中,并且遇到了baseUrl问题
TLDR:我想让我的RTK查询基url /API而不是http://localhost:5173/api/auth,但它不适用于MSW。
在添加MSW之前,我的authSlice.ts看起来像这样:
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>
需要注意的主要一点是,当baseUrl设置为/API时,一切都按预期工作
但是,当我包含MSW时,它无法工作,直到我将baseURL更新为http://localhost:5173/api
以下是我的MSW设置:
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)
url需要匹配我的authSlice的baseUrl,但只有当我同时使用url http://localhost:5173/api/auth时才有效。简单地执行/API/auth并不起作用。
我假设这将是一个问题,当我部署的应用程序,因为我可能必须包括一个env变量或东西,使RTK查询工作。有没有一种方法可以让一切都与/API的baseUrl一起工作?
在相关的情况下,这是我的测试:
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()
})
1条答案
按热度按时间ruarlubt1#
不不可能如果在节点环境中发出请求,则无法使用相对URL。没有“当前”url(通常是浏览器的url栏),所以它不能与任何东西相关。
你需要一个绝对URL。