ApolloError: request to http://mock.... - 인프런

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

33-05-jest-unit-test-mocking

ApolloError: request to http://mock.com/graphql failed, reason: response3.headers.all is not a function

작성

502

33-05 강의에서 test에서 자꾸
이 오류가 뜹니다

apis.js

import { graphql } from "msw";

const gql = graphql.link("http://mock.com/graphql")

export const apis = [
  gql.mutation("createBoard", (req, res, ctx) => {
    const { writer, title, contents } = req.variables.createBoardInput

    return res(
      ctx.data({
        createBoard: {
          _id: "qqq",
          writer,
          title,
          contents,
          __typepname: "Board",
        },
      })
    );
  }),
  // gql.query("fetchBoards", () => {})
];

jest.setup.js

import { server } from "./src/commons/mocks/index"

beforeAll(() => server.listen());
afterAll(() => server.close());

index.test.tsx
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking";
import {
    ApolloClient,
    ApolloProvider,
    HttpLink,
    InMemoryCache,
} from "@apollo/client";
import fetch from "cross-fetch";
import mockRouter from "next-router-mock";

jest.mock("next/router", () => require("next-router-mock"));

it("게시글이 잘 등록되는지 테스트 하자!", async () => {
    const client = new ApolloClient({
        link: new HttpLink({
            uri: "http://mock.com/graphql",
            fetch,
        }),
        cache: new InMemoryCache(),
    });

    render(
        <ApolloProvider client={client}>
            <StaticRoutingMovedPage />
        </ApolloProvider>
    );

    fireEvent.change(screen.getByRole("input-writer"), {
        target: { value: "맹구" },
    });
    fireEvent.change(screen.getByRole("input-title"), {
        target: { value: "안녕하세요" },
    });
    fireEvent.change(screen.getByRole("input-contents"), {
        target: { value: "방가방가" },
    });

    fireEvent.click(screen.getByRole("submit-button"));

    await waitFor(() => {
        expect(mockRouter.asPath).toEqual("/boards/qqq");
    });
});

도와주십쇼 ㅠㅠ

react node.js seo graphql next.js

답변 4

광장

저도그래요 위에 나온 방법대로 다 해보고 package.json 정확히 강의랑 똑같은 버전으로 맞춰봤는데도 안되네요 mock 서버가 아폴로 클라이언트에서 인식이 안되는것 같은데 그냥 스킵해야할듯요

김태연

혹시 해결하셨나요? 저도 같은 문제를 맞닥뜨려서요. 답변 달아주시면 감사하겠습니다!

노원두

지식공유자

안녕하세요! 무연님!

원인이 여러가지가 될 수 있으므로, 정확한 정답 보다는 가이드 안을 제시해 드릴게요!

우선적으로 올려주신 코드상에는 크게 문제가 없어 보여요! 따라서, graphql 을 모킹한 서버쪽에서 로그를 출력해 보시고, 로그가 정상적으로 출력되는지를 통해 모킹서버에 도달하였는데 응답에 문제가 있는 것인지, 아니면 아예 요청 자체가 안되는 상황인건지를 조금 더 구체적으로 알아볼 필요가 있을 것 같아요!
이에따라, 어느부분에서 현재 막히고 있는지를 한 번 파악해 보세요!
모든것이 문제가 없는데도 에러가 발생할 수 있습니다. 실제로 버전때문에 이러한 현상이 종종 생기곤 하는데요! 로그도 잘 찍히고 모든게 이상없는데 작동이 안된다면, yarn.lock을 지우고 msw와 ApolloClient 등 관련된 라이브러리를 새 버전으로 다시 한 번 설치해 보세요!
또는, 현재 올려주지 않으신 파일 중 jest.config.mjs 파일이 있는데, 해당 파일에서 jset.setup.js 파일이 연동이 제대로 되어있는지도 확인해 보세요!!

인프런 AI 인턴

안녕하세요 김무연 님, 인프런 AI 인턴이에요.

해당 오류는 ApolloError로서 발생하는데, 주로 GraphQL 요청이 실패했을 때 발생하는 오류입니다. 오류 메시지를 보면 response3.headers.all is not a function라는 오류가 발생하고 있는데, 이는 응답 객체의 headers 속성에서 all 함수를 찾을 수 없다는 의미입니다.

보시면 msw 라이브러리를 사용하여 GraphQL 요청을 가로채고 가짜 응답을 주는 설정이 되어 있습니다. 오류가 발생하는 부분은 아래 코드입니다.

const gql = graphql.link("http://mock.com/graphql")

여기서 가짜 응답을 제공하기 위해서 정의된 gql 객체에는 link이라는 속성이 존재하지 않습니다. 따라서 gql 객체를 올바르게 생성하고 가짜 응답을 설정해야 합니다.

오류를 해결하기 위해서는 gql 객체를 다음과 같이 수정해야 합니다.

import { graphql } from "msw";

const server = graphql.link("http://mock.com/graphql");

export const apis = [
  server.mutation("createBoard", (req, res, ctx) => {
    // mutation 로직
  }),
  // query 로직
];

해당 수정 후에는 다시 테스트를 실행해 보세요. 오류가 해결되었는지 확인해주세요. 추가로 문제가 있을 경우 알려주세요. 도움이 되었기를 바랍니다. 감사합니다.

인프런 커뮤니티 질문&답변

ApolloError: request to http://mock.com/graphql failed, reason: response3.headers.all is not a function