Jest fetch mock example

 

// api.test.js

import {
  fetchWeather,
  fetchLocation,
} from './api';

import WEATHER from '../../fixtures/weather';
import LOCATION from '../../fixtures/location';

describe('api', () => {
  const mockFetch = (data) => {
    global.fetch = jest.fn().mockResolvedValue({
      async json() { return data; },
    });
  };

  describe('fetchWeather', () => {
    beforeEach(() => {
      mockFetch(WEATHER);
    });

    it('returns weather', async () => {
      const weather = await fetchWeather();

      expect(weather).toEqual(WEATHER);
    });
  });

  describe('fetchLocation', () => {
    beforeEach(() => {
      mockFetch(LOCATION);
    });

    it('returns location', async () => {
      const location = await fetchLocation();

      expect(location).toEqual(LOCATION);
    });
  });  
});

순서대로,

 

1. 검증할 fetch 함수를 import 한다.

2. 가짜 함수를 통해 반환시킬 가상 데이터 import, 불러오지 않고 바로 작성해도 된다.

3. mockFetch는 인자를 받아 가짜 fetch 함수를 통해 리턴하는 함수 표현식이다.

4. mockResolvedValue()를 통해 가짜 fetch 함수가 인자로 받은 가상 데이터를 비동기적으로 리턴하도록 설정한다.

5. beforeEach > mockFetch를 통해 각 테스트 전에 필요한 데이터를 리턴하도록 전처리한다.

6. 리턴된 데이터를 검증한다.

 

테스트 커버리지 달성을 위해 작성했지만 아직 그 효용성을 찾지는 못했다. 테스트하고자 하는 것이 무엇인가? 실제 API 서버를 테스트하는 것도 아니고 실제 데이터를 검증하는 것도 아니다. 이미 mock 함수에게 정답을 리턴하도록 해놓고 그 리턴을 다시 정답지와 비교해보는 작업처럼 느껴졌다.