react 프로젝트에서 msw 업데이트 시 테스트에서 빈 문자열이 반환됨

Question

환경 설정은 아래와 같구요vitest.config.js/// import { defineConfig } from "vitest/config"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], test: { environment: "jsdom", include: ["**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], globals: true, typecheck: { tsconfig: "tsconfig.test.json", }, setupFiles: ["./src/app/utils/VitestBootstrap.ts"], coverage: { provider: "v8", include: ["src/**/*.{js,ts}"], exclude: [ "src/**/__mocks__/**", "src/**/{models,providers,utils,data}/**", ], all: true, reporter: ["html", "clover", "text"], }, }, }); VitestBootstrap.tsimport "@testing-library/jest-dom"; import "jest-extended"; import "whatwg-fetch"; import { server } from "./mocks/server"; import { vi } from "vitest"; vi.mock("next/config", () => { const getConfig = { publicRuntimeConfig: { baseURL: { myapp: "https://example.com", }, }, }; return { default: () => getConfig }; }); beforeAll(() => server.listen({ onUnhandledRequest: "error" })); afterAll(() => server.close()); afterEach(() => server.resetHandlers());server.tsexport const handlers = [ http.post("/test/:id", () => HttpResponse.json(samplePostSuccess, { status: 200 }), ), ]; export const server = setupServer(...handlers);아래는 실행한 부분export const axiosGetGen = (axiosInstance: AxiosInstance) => { return async ( path: string, init: RawAxiosRequestHeaders = {}, ): Promise => { return axiosRawGetGen(axiosInstance)(path, init).then((res) => res.data); }; }; export const axiosRawGetGen = (axiosInstance: AxiosInstance) => { return async ( path: string, init: RawAxiosRequestHeaders = {}, ): Promise> => { return axiosInstance.get(path, { headers: init, withCredentials: true }); }; };export const axiosInstance: AxiosInstance = axios.create({ baseURL: BASE_URL, timeout: publicRuntimeConfig.requestTimeout, });it("test", async () => { const axiosGet = axiosGetGen(axiosInstance); const expected = { success: true }; let cookies; server.use( http.get("/test", async ({ cookies: ck }) => { cookies = ck; return HttpResponse.json({ data: expected }, { status: 200 }); }), ); document.cookie = "testCookie=value"; const actual = await axiosGet("/test"); expect(cookies).toEqual({ testCookie: "value" }); expect(actual).toEqual(expected); // 빈 문자열 "" 반환으로 실패 });actual에서 { success: true } 가 리턴되어야 하는데 빈 문자열 ""가 리턴됩니다...axios는 1.8.2를 쓰고 있고,msw는 1.2.2 쓰다가 2.7.3으로 업데이트 하고 기존에 rest.get 사용하던 곳을 http.get, HttpResponse.json 등으로 수정하고 테스트 해보니까 저러네요... (업데이트 전에는 잘 돌아감)axios를 안쓰면 결과가 제대로 나오긴 하는데, axios가 통과하게 하려면 어떤 설정 같은게 필요할까요?아래는 관련 있어보였던 것...https://mswjs.io/docs/migrations/1.x-to-2.x/#frequent-issues

react 프로젝트에서 msw 업데이트 시 테스트에서 빈 문자열이 반환됨

0개의 답변

#axios 목록