【Jest】APIコールする関数をMock化する【TypeScript】

Mock化したい関数

例えば、とあるコンポーネントから呼んでいる、下記のようなapiをコールする関数をMock化したいとする

api.ts

export const sampleApi = async (): Promise<AxiosResponse<Sample>> => {
    return axios
        .get('sample/api')
        .then((res) => {
            return res;
        })
        .catch((err) => {
            return err;
        });
};

Let's Mock化!!

index.spec.ts

// ①Mock化したい関数をimportする
import { sampleApi } from 'api';

// ②module全体をMock化する
jest.mock('api');

// ③関数をMock化する
const sampleApiMock = sampleApi as jest.MockedFunction<typeof sampleApi>;

// ④③から任意の値を返すようにしたい場合
sampleApiMock.mockResolvedValue({ status: 200, data: 'hogehoge'});

// ⑤beforeEachなりでResetするのを忘れずに
sampleApiMock.mockClear();

ちなみに、axios自体をmock化したい場合も同じような形でできます

index.spec.ts

// ①
import axios from 'axios';

// ②
jest.mock('axios');

// ③
const axiosMock = axios as jest.MockedFunction<typeof axios>;

参考

モック関数(Jest公式)