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

강민승님의 프로필 이미지
강민승

작성한 질문수

습관부터 바꿔주는 Node.js & Express 기초

OAuth 2.0

Express 사용하면서 Jest 테스트 관련해서 질문 드립니다.

작성

·

187

0

// 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
}



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

답변 1

0

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

제시하신 코드의 경우, 1번 코드와 2번 코드 모두 같은 axios 요청을 실행하지만, 문제가 발생하는 것은 이 두 코드 사이의 실행 결과에 차이가 없는 것 같으므로, 테스트 동작에서 차이가 발생하는 원인을 추측하는 것이 중요합니다.

1번 코드에서는 직접적으로 axios.get 함수를 사용하여 요청을 보내고 있습니다. 이 때, jest.mock을 사용해 axios 객체를 목킹하고 있으며, mockedAxios.get.mockResolvedValue를 이용하여 테스트가 실행될 때 axios.get의 호출 결과를 직접 제어할 수 있습니다. 따라서 테스트는 목킹된 응답에 따라 예상대로 동작합니다.

2번 코드에서는 axios({...}) 형태를 사용하여 요청을 보내고 있으며, 여기서도 메소드는 ‘get’으로 설정되어 있습니다. 하지만, 여기서 주의해야 할 점은 jest로 목킹한 부분이 axios.get에 대해서만 적용되어 있다는 것입니다. axios({...}) 형태의 호출은 내부적으로는 axios의 다른 메서드를 사용할 수 있지만, 명시적으로 axios.get 함수를 호출하는 것과는 달리, jest로 직접적으로 목킹된 행위와는 독립적으로 동작하게 될 수 있습니다. 따라서 이 경우, mockedAxios.get.mockResolvedValue로 설정된 목 데이터가 axios({...}) 호출에 영향을 미치지 못할 가능성이 있습니다.

실제로 해당 테스트 문제가 발생하는 정확한 원인은 jest 목킹 설정과 테스트 실행 환경, axios 내부 동작 등 다양한 요소에 의해 결정될 수 있습니다. 따라서, 두 번째 방식의 코드를 사용하여 테스트를 통과시키고자 한다면, axios({...}) 형태의 호출이 mockedAxios 객체의 모의 구현과 상호 작용할 수 있도록 목킹 설정을 조정해야 할 수도 있습니다.

이와 같이, 두 코드 사이의 차이점을 이해하려면 실제 실행되는 환경의 목킹 동작 방식을 정확히 파악하는 것이 중요합니다.

강민승님의 프로필 이미지
강민승

작성한 질문수

질문하기