Axios adalah library JavaScript yang populer digunakan untuk melakukan permintaan HTTP dari browser dan Node.js. Axios mempermudah pengiriman dan penerimaan data dari server dengan sintaks yang sederhana dan berbagai fitur yang kuat seperti request/response interception, transformasi data, dan dukungan untuk menjalankan permintaan HTTP secara async/await.

Ketika mengembangkan aplikasi berbasis API, sering kali kita perlu melakukan testing, terutama pada bagian yang berhubungan dengan permintaan HTTP. Untuk kebutuhan ini, axios-mock-adapter hadir sebagai alat yang membantu kita untuk membuat mock (tiruan) dari respons HTTP pada saat pengujian, sehingga kita dapat memastikan kode berfungsi dengan baik tanpa harus benar-benar memanggil API eksternal.

Dalam artikel ini, kita akan membahas bagaimana cara menggunakan Axios dan Axios Mock Adapter di JavaScript, mencakup instalasi, penggunaan dasar, dan contoh penerapannya dalam pengujian.

Apa itu Axios?

Axios adalah library HTTP berbasis promise yang dirancang untuk melakukan permintaan HTTP dengan cara yang sederhana dan konsisten di berbagai platform (browser dan Node.js). Axios menyediakan berbagai fitur yang membuat pengiriman data lebih efisien:

• Mendukung permintaan HTTP GET, POST, PUT, DELETE, dll.
• Dukungan untuk async/await yang membuat penulisan kode asinkron lebih mudah dibaca.
• Mendukung interceptors untuk memodifikasi request atau response secara global.
• Transformasi otomatis data JSON.

Instalasi Axios

Untuk memulai, kita perlu menginstal Axios menggunakan npm atau yarn:

npm install axios

Setelah instalasi, Anda dapat menggunakan Axios dalam proyek JavaScript seperti berikut:

const axios = require('axios');

// Melakukan request GET ke API
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Pada contoh di atas, Axios melakukan permintaan GET ke API publik dan menampilkan data respons yang diterima.

Apa itu Axios Mock Adapter?

Axios Mock Adapter adalah library yang digunakan untuk membuat mock request pada Axios. Library ini sangat berguna dalam pengujian, karena memungkinkan kita untuk mengontrol respons API tanpa benar-benar memanggil API eksternal. Dengan mock adapter, kita dapat memastikan bahwa logika aplikasi kita berfungsi dengan baik terlepas dari ketersediaan jaringan atau ketergantungan pada layanan eksternal.

Instalasi Axios Mock Adapter

Anda bisa menginstal Axios Mock Adapter dengan perintah berikut:

npm install axios-mock-adapter

Setelah itu, kita dapat menggunakannya untuk membuat mock respons HTTP dalam pengujian kita.
Menggunakan Axios Mock Adapter

Berikut adalah contoh sederhana bagaimana menggunakan Axios Mock Adapter untuk membuat mock respons pada permintaan HTTP:

const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');

// Membuat instance MockAdapter
const mock = new MockAdapter(axios);

// Membuat mock untuk request GET
mock.onGet('/users').reply(200, {
  users: [{ id: 1, name: 'John Doe' }],
});

// Melakukan request GET menggunakan Axios
axios.get('/users')
  .then(response => {
    console.log(response.data);  // Output: { users: [{ id: 1, name: 'John Doe' }] }
  })
  .catch(error => {
    console.error('Error:', error);
  });

Pada contoh di atas, kita membuat mock respons untuk permintaan GET ke endpoint /users. Dengan menggunakan axios-mock-adapter, kita bisa menentukan bahwa setiap kali ada request GET ke /users, kita akan mendapatkan respons status 200 dengan data pengguna yang sudah kita tentukan.

Menggunakan Axios Mock Adapter untuk Testing

Axios Mock Adapter sangat berguna ketika kita ingin melakukan testing unit pada kode yang melibatkan permintaan HTTP. Kita dapat mensimulasikan respons API dan memeriksa bagaimana aplikasi menangani hasil tersebut.

Berikut contoh cara menggunakan Axios Mock Adapter dalam konteks pengujian:

const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');

// Membuat instance mock untuk Axios
const mock = new MockAdapter(axios);

// Fungsi yang akan kita uji
async function fetchUserData() {
  try {
    const response = await axios.get('/user');
    return response.data;
  } catch (error) {
    throw new Error('Error fetching user data');
  }
}

// Test menggunakan mock
mock.onGet('/user').reply(200, {
  user: { id: 1, name: 'Jane Doe' },
});

fetchUserData().then(data => {
  console.log(data);  // Output: { user: { id: 1, name: 'Jane Doe' } }
}).catch(error => {
  console.error(error);
});

Dalam pengujian ini, kita memanfaatkan mock untuk memastikan bahwa fungsi fetchUserData mendapatkan data yang tepat dari API. Kita juga bisa memodifikasi mock untuk menguji berbagai skenario, seperti respons error atau status kode selain 200.

Membuat Mock untuk Berbagai Jenis Request

Axios Mock Adapter tidak hanya mendukung mock untuk permintaan GET, tetapi juga untuk metode HTTP lain seperti POST, PUT, DELETE, dll.

Berikut adalah contoh bagaimana cara membuat mock untuk berbagai jenis permintaan HTTP:

// Mock POST request
mock.onPost('/login').reply(200, {
  token: '12345abcde',
});

// Mock PUT request
mock.onPut('/user/1').reply(200, {
  user: { id: 1, name: 'Updated Name' },
});

// Mock DELETE request
mock.onDelete('/user/1').reply(204);

// Melakukan request POST
axios.post('/login', { username: 'user', password: 'pass' })
  .then(response => {
    console.log(response.data);  // Output: { token: '12345abcde' }
  });

// Melakukan request PUT
axios.put('/user/1', { name: 'Updated Name' })
  .then(response => {
    console.log(response.data);  // Output: { user: { id: 1, name: 'Updated Name' } }
  });

// Melakukan request DELETE
axios.delete('/user/1')
  .then(response => {
    console.log(response.status);  // Output: 204
  });

Kesimpulan

Axios adalah alat yang kuat untuk melakukan permintaan HTTP di JavaScript, baik di browser maupun Node.js. Dalam konteks pengujian, axios-mock-adapter adalah alat yang sangat berguna untuk membuat mock request, memungkinkan kita untuk melakukan testing unit tanpa benar-benar melakukan permintaan jaringan ke API eksternal.

Penggunaan Axios Mock Adapter memberikan fleksibilitas dalam pengembangan aplikasi, karena kita dapat mensimulasikan berbagai respons dari API dan menguji bagaimana aplikasi bereaksi terhadap kondisi yang berbeda.