Axios Mocking에 관한 질문입니다.

// Axios.test.ts
import axios from 'axios';
import ManagerService from "./ManagerService";

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe("Axios Test", () => {
    let managerService = new ManagerService();

    it("should mock axios get call", async () => {
        mockedAxios.get.mockResolvedValue({
            data: [
                {
                    corporation: "inflearn"
                }
            ],
        });

        const test = await managerService.axiosTest("inflearn");
        expect(test).toEqual([
            {
                corporation: "inflearn"
            }
        ]);

        expect(mockedAxios.get).toHaveBeenCalledWith(`${process.env.SERVER_URL}/corporation/info`, {
            params: { corporation: "inflearn" },
        });
    });
});

위와 똑같은 코드로 테스트를 진행했고, 본 코드에서는 약간의 차이만 있었습니다.

하지만 아직 왜 그렇게 되는지 알지 못하여서 강사님께 여쭤보려고 합니다.

1번 코드 ( 테스트가 잘 동작하는 코드 )

axiosTest = async (corporation: string) => {
    const response = await axios.get(`${process.env.SERVER_URL}/corporation/info`, {
        params: {
            corporation: corporation,
        },
    });

    if (!response) {
        throw new Error("값이 없음");
    }

    return response.data;
};

2번 코드 ( 값이 없음으로 에러가 발생하는 코드 )

axiosTest = async (corporation : string) => {
    const site = await axios({
        method: 'get',
        url: `${process.env.SERVER_URL}/corporation/info`,
        params: {
            corporation : corporation
        },
    })

    if(!site) {
        throw new Error("값이 없음");
    }

    return site.data
}

둘의 차이점에 대해서 알 수 있을까요?

안녕하세요, 인프런 AI 인턴입니다.

1번 코드와 2번 코드의 차이점에 대해서 설명드리겠습니다.

기본적으로 1번 코드와 2번 코드 모두 axios를 활용하여 HTTP GET 요청을 보내고 있습니다. 차이점은 요청을 보내는 방식에 있습니다.

1번 코드에서는 axios.get 메소드를 직접 사용하여 요청을 보냅니다. 이 방식은 HTTP GET 요청을 보낼 때 사용하기 편리한 단축 메소드입니다. URL과 파라미터만 지정해주면 axios가 내부적으로 이를 처리해 요청을 보내줍니다.

const response = await axios.get(`${process.env.SERVER_URL}/corporation/info`, {
    params: {
        corporation: corporation,
    },
});

반면, 2번 코드에서는 axios 함수에 요청 옵션 객체를 직접 전달하는 방식을 사용합니다. 이 방식에서는 메소드와 URL, 파라미터 등을 요청 옵션 객체 안에 지정해주어야 합니다. 이 방식은 좀 더 다양한 HTTP 메소드(GET, POST 등)에 대한 요청을 유연하게 처리할 수 있는 장점이 있습니다.

const site = await axios({
    method: 'get',
    url: `${process.env.SERVER_URL}/corporation/info`,
    params: {
        corporation: corporation,
    },
});

두 방식 모두 유효한 axios 사용법이지만, “값이 없음으로 에러가 발생하는 코드”라고 하신 2번 코드에서 실제로 axios 요청이 실패했거나 의도하지 않은 동작이 발생했을 가능성은 낮아 보입니다. axios 요청은 Promise를 반환하며, 이 Promise가 reject되지 않는 한(즉, 네트워크 오류 등으로 요청 자체가 실패하지 않는 한) site 변수에는 항상 요청의 결과가 담길 것입니다.

문제가 발생한 정확한 원인을 파악하기 위해서는 추가적인 디버깅이 필요합니다. 예를 들어, axios의 반환 값이 예상과 다른 형태로 오거나, 응답 자체는 성공적으로 받았으나 예상했던 데이터 형식이 아닌 경우 등 여러 상황을 검토해볼 필요가 있습니다.

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