typescript 在使用RTK查询和MSW进行测试时遇到问题

xoefb8l8  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(159)

我试图将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()
    })
ruarlubt

ruarlubt1#

不不可能如果在节点环境中发出请求,则无法使用相对URL。没有“当前”url(通常是浏览器的url栏),所以它不能与任何东西相关。
你需要一个绝对URL。

相关问题