현재 노트: KR-010.30 a
상위 분류: KR-010.30

#Jest #Axios

Why? 왜 이 글을 쓰게 되었나요?

Jest로 Axios 라이브러리를 활용한 함수를 테스트하던 중 문제가 발생해 트러블슈팅을 하던 과정에서 평소 사용하던 Axios를 제대로 알지 못해서 생기는 문제였구나!를 느꼈습니다.

그래서 이번 기회에 Axios를 좀 더 알아보고, 좀 더 근본적으로는 테스트하기전에 사용하는 객체, 함수의 schema를 파악하는 중요성을 기록하자는 의도로 글을 작성하였습니다.

What? 어떤 문제가 있었나요?

문제 자체는 Jest에서 반환값이 undefined와 비교한다는 오류였습니다

다음과 같은 시도에서 값을 비교하는 과정에서 문제가 생긴 것이 었습니다.
즉 fetchData의 결과값이 undefined라는 값을 가지는 것 이었고 이에 따라 fetchData의 단위 테스트를 수행하지 못하는 문제가 발생하였습니다.

test("fetchData returns data from API", async () => {
  axios.get.mockResolvedValue(mockResponse);

  const result = await fetchData();
  expect(result).toEqual(mockResponse);
  
});

How 어떻게 해결하셨나요?

해결하는 과정은 먼저 fetchData 함수의 반환값을 수행하여 테스트, mockResponse와의 비교, 그리고 mockResponse의 수정 순으로 진행하였습니다.

가장 먼저 fetchData의 경우 처음으로 작성하고 Jest에서 수행하였기 때문에 반환값을 확인해보았습니다.

$ node api/openApi.js

이 과정에서 크게 2가지를 수행하였습니다.
먼저 axios의 반환값이 생각보다 depth가 깉고 많아 보기 어려웠기에 어떻게하면 보기 편할까?를 고민하였고 AI검색을 통해 utils를 활용하여 출력 결과를 깔끔하게 수정하였습니다.

단순하게 console.log 시 수십줄의 출력...

기본 라이브러리 utils를 활용하여 깔끔하게 출력!
console.log(util.inspect(response, { depth: 0, colors: true }));

fetchData의 결과 우선 정상작동을 확인하였습니다. 여기서 느낀 부분이 아 처음에 테스트할 때 axios과 mock환경의 객체값을 일치시키지 않았구나 라는 생각이 스쳤습니다. 왜냐하면 jest환경의 객체는 단순한 data값만 생각했는데 axios는 더 많은 키값으로 구성돼있었기 때문입니다.
그래서 이후후 Jest의 테스트 환경인 mockResponse와 비교하였습니다.

mockResponse와 비교시 data키값이 없는 형태를 깨달았습니다.

즉 fetchData가 가져오는 값은 response의 data인데 , jest에서는 단위테스트로 임의의 객체를 활용하다보니 이 키 값이 없어서 undefined가 나왔던 것이었습니다.

기존 jest에서

const mockResponse = {
  count: 362,
  list: [
    {}] ...

변경

// data 키 추가
const mockResponse = {
	data: {
	    count: 362,
	    list: [
	    ...
	    ]
	}
}

// 테스트 속성 수정
expect(result).toEqual(mockResponse.data);

mockResponse에 data키값을 추가한 후 toEqaul의 값을 수정하여 트러블 슈팅을 해결하였습니다

문제의 원인인 Mock데이터의 data 키값누락을 mockResponse객체에 추가시킨 후, 변경된 schema에따라 toEqual의 값을 수정하여 테스트를 성공하였습니다.

test("fetchData returns data from API", async () => {
  axios.get.mockResolvedValue(mockResponse);

  const result = await fetchData();
  
  
  // before expect(result).toEqual(mockResponse);
  before expect(result).toEqual(mockResponse.data);
  
});

Retrospective 무엇을 배웠고, 어떻게 활용할까요?

테스트하기전 함수나 객체의 반환값을 제대로 파악하였는지 확인하고, 이를 통해 테스트를 더욱 빠르고 확실하게 하기

처음에는 단순히 axios의 값이 제대로 나오는지 확인하기위한 간단한 Jest의 문제처럼 보였지만, 해결하는 과정에서 "아 내가 Axios의 객체값을 잘 알지 못해서 테스트환경의 객체값이 제대로 구성안된 것이 근본 문제인 거구나"라는 점을 깨달았습니다.

이 과정에서 Axios의 객체의 값을 직접 확인 해보고, utils라는 라이브러리도 배우는 등의 성과가 있었습니다.

아마 앞으로의 테스트에 영향을 미칠 것 같다고 느끼는게, 테스트하고자하는 함수나 객체 ,클래스의 속성과 반환값 등을 제대로 확인하는 점이 얼마나 중요한지를 계속 생각할 것 같습니다.