Cara Membuat Mocking Panggilan API dengan Jest: Tutorial Lengkap

Saat menulis pengujian untuk kode yang membuat panggilan API, penting untuk melakukan mock terhadap panggilan tersebut untuk memastikan pengujian Anda andal, cepat, dan tidak bergantung pada layanan eksternal. Jest, kerangka kerja pengujian JavaScript yang populer, menyediakan beberapa cara untuk dengan mudah melakukan mock terhadap panggilan API dalam pengujian Anda. Mari selami berbagai pendekatan yang dapat Anda gunakan.

Menggunakan jest.mock()

Salah satu cara untuk melakukan mock panggilan API di Jest adalah dengan menggunakan fungsi jest.mock() untuk melakukan mock seluruh modul yang membuat permintaan API. Berikut adalah contohnya:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers mengembalikan data dari API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Dalam contoh ini, kita menggunakan jest.mock('axios') untuk secara otomatis melakukan mock seluruh modul axios. Kemudian kita menggunakan axios.get.mockResolvedValueOnce() untuk melakukan mock respons untuk panggilan axios.get berikutnya. Pengujian kita kemudian dapat memverifikasi bahwa API dipanggil dengan benar dan mengembalikan data yang di-mock1.

Menggunakan Mock Manual

Pendekatan lain adalah dengan melakukan mock secara manual modul yang membuat panggilan API dengan membuat folder __mocks__ dan menempatkan file implementasi mock di dalamnya:

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

Sekarang dalam pengujian Anda, Anda dapat melakukan mock respons yang berbeda untuk setiap pengujian:

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers mengembalikan data dari API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Dengan mock manual ini, Anda memiliki kendali penuh untuk melakukan mock metode Axios yang berbeda seperti get, post, dll. dengan implementasi Anda sendiri2.

Menggunakan Axios-mock-adapter

Anda dapat menggunakan pustaka untuk melakukan mock permintaan Axios dengan lebih canggih. Pertama, instal:

npm install axios-mock-adapter --save-dev

Kemudian dalam pengujian Anda:

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;
  
  beforeAll(() => {
    mock = new MockAdapter(axios);
  });
  
  afterEach(() => {  
    mock.reset();
  });
  
  test('mengembalikan data pengguna', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);
    
    const result = await getUsers();
    
    expect(result.data).toEqual(users);  
  });
});

Dengan axios-mock-adapter, Anda dapat melakukan mock permintaan berdasarkan URL, parameter, header, dan lainnya. Anda juga dapat mensimulasikan kesalahan dan waktu tunggu.

Menyuntikkan Instance Axios yang Di-mock

Jika kode Anda menggunakan axios secara langsung, opsi lain adalah menyuntikkan instance axios yang di-mock ke dalam kode Anda selama pengujian:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers mengembalikan data dari API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Di sini kita melakukan mock axios itu sendiri, bukan seluruh modul, dan menyediakan fungsi get yang di-mock sendiri.

Tips untuk Melakukan Mock Panggilan API

Berikut adalah beberapa tips yang perlu diingat saat melakukan mock panggilan API di Jest:

• Atur ulang mock Anda di antara pengujian untuk memastikan pengujian independen dengan menggunakan beforeEach dan afterEach
• Jangan melakukan mock terlalu banyak - hanya melakukan mock fungsi dan modul yang benar-benar digunakan oleh kode Anda
• Uji juga kasus kegagalan dengan melakukan mock kesalahan dan respons yang tidak terduga
• Pertimbangkan untuk membuat perlengkapan mock yang dapat digunakan kembali untuk respons API umum

Mock API dengan Apidog

Jika Anda ingin mencoba pengalaman pengembangan API yang berbeda, Anda dapat mempertimbangkan untuk menggunakan Apidog!

Apidog adalah platform API low-code yang menyediakan pengembang dengan antarmuka pengguna yang sederhana dan intuitif untuk mengembangkan API. Dengan Apidog, Anda dapat membangun, menguji, melakukan mock, dan mendokumentasikan API. Mari kita lihat lebih dekat Apidog!

Apidog Smart Mock

Biarkan Apidog secara otomatis menghasilkan data mock yang realistis tanpa konfigurasi manual jika Anda tidak memiliki aturan mock yang pasti.

Apidog Advanced Mock

Modifikasi respons API dengan skrip khusus untuk mensimulasikan interaksi kehidupan nyata antara sisi klien dan server.

Apidog Cloud Mock

Berkolaborasi dengan tim Anda dengan fitur cloud mock melalui alamat tetap, dapat diakses di server cloud mock.

Kesimpulan

Melakukan mock adalah keterampilan mendasar untuk menulis pengujian yang baik, terutama ketika berhadapan dengan dependensi eksternal seperti panggilan API. Jest menyediakan banyak cara untuk melakukan mock panggilan API dalam pengujian Anda, mulai dari melakukan mock seluruh modul dengan jest.mock(), hingga melakukan mock modul secara manual, hingga menggunakan pustaka seperti axios-mock-adapter untuk kasus yang lebih canggih. Kuncinya adalah memilih pendekatan yang tepat untuk kebutuhan Anda sambil menjaga pengujian Anda tetap independen dan fokus pada kode yang sedang diuji, bukan detail implementasi API. Dengan teknik mock ini di sabuk alat Anda, Anda dapat menulis pengujian yang tangguh untuk kode yang bergantung pada API.