TypeScript × Jest로 axios의 모의 만들기 테스트를 실시한다

소개

TypeScript에서 Jest의 모의 기능을 사용하려고하면 빠졌습니다. . .
해결 방법을 찾았으므로 메모합니다.

대상 독자

TypeScript에 대한 지식이 어느 정도 있습니다

Jest를 TypeScript에서 실행할 수있는 환경이 있습니다.

환경

node.js, 8.10.x

typescript, 3.2.x

axios, 0.18.x

jest, 23.6.x

ts-jest, 23.10.x

macOS X El Capitan

테스트 대상

출처

src/index.ts

import axios from 'axios';

export async function main() {
  try {
    const { data } = await axios.get('{YOUR-API-ENDPOINT}');
    return data;  // { message: "Real response!" }
  } catch (err) {
    throw new Error(err.message);
  }
}

main().then(res => console.log(res));

실행 결과

$ npx tsc

$ node dist/index.js
{ message: 'Real response!' }

테스트 코드

쓰기 1

test/index.test.ts

jest.mock('axios');
import axios from 'axios';
// tslint:disable-next-line:no-any
(axios.get as any).mockResolvedValue({ data: { message: 'Mock response!!!' } });

import { main } from '../src/index';

describe('main test', () => {
  it('axios return mock value', async () => {
    const res = await main();
    expect(res.message).toBe('Mock response!!!');
  });
});

쓰기 2

test/index.test.ts

jest.mock('axios');
import axios, { AxiosInstance } from 'axios';
// tslint:disable-next-line:no-any
const myAxios: jest.Mocked<AxiosInstance> = axios as any;
myAxios.get.mockResolvedValue({ data: { message: 'Mock response!!!' } });

import { main } from '../src/index';

describe('main test', () => {
  it('axios return mock value', async () => {
    const res = await main();
    expect(res.message).toBe('Mock response!!!');
  });
});

테스트 실행 결과

결론

쓰는 방법의 1과 2를 비교했을 경우, 문자수가 적게 되는 것은 1입니다만, 2의 경우는 위의 예로 말하면 myAxios 있습니다.

1의 경우는 mockResolvedValue()를 수동으로 기입할 필요가 있습니다만, 2의 경우는 IDE의 예측으로 나옵니다.

코딩 실수를 줄이기 위해서도 자신은 2 를 사용해 갈까라고 생각하고 있습니다.

any형을 사용하지 않고 쓸 수 있는 방법을 알고 싶다. . .

2019/07/23 추가

@Statham 씨에게 코멘트로 any 형을 사용하지 않는 쓰는 법을 가르쳐 주셨습니다! 감사합니다!