Testing Async Redux Actions menggunakan Jest

Pada artikel ini saya akan sharing contoh kasus saya membuat unit testing pada ReactJS, spesifiknya pada async redux action. Hal ini merupakan hal baru bagi saya dan harus membuatnya karena mendapat legacy code yang masih kosongan unit testingnya dan banyak menggunakan async redux action.

Berikut contoh kasus untuk memanggil master data employee menggunakan redux action

const setEmployee = (data: any) => ({
  dataEmployee: data,
  type: ActionTypes.SET_MASTER_EMPLOYEE,
});

export const fetchMasterEmployee = () => (dispatch: any) => {
  return axios.get('v1/master/employee').then((response: any) => {
    if (response.status === 200) {
      const data: [] = response.data.data;
      dispatch(setEmployee(data));
    } else {
      dispatch(setEmployee([]));
    }
  })
};

Setup

jalankan perintah dibawah ini untuk menginstall package

npm i redux-mock-store
npm i axios-mock-adapter
npm i redux-thunk

lalu import packagenya

// untuk membuat mock store yang akan kita kirimkan action
import configureMockStore from 'redux-mock-store';
// import thunk middle untuk membuat action asynchronous
import thunk from 'redux-thunk';
// untuk mocking pemanggilan axios
import MockAdapter from 'axios-mock-adapter';
// import axios dependency
import axios from 'axios';
// inisialisasi middlewares
const middlewares = [thunk];
// inisialisasi mockstore sebagai metode configureStore yang menggunakan middlewares sebagai parameternya
const mockStore = configureMockStore(middlewares);
// membuat mock instance dari MockAdapter axios
const mock = new MockAdapter(axios);
const store = mockStore();

Mari kita buat unit testnya

 describe('Testing Action fetchMasterEmployee', () => {
        beforeEach(() => { 
             // Untuk membersihkan semua action yang sedang berjalan dalam store
             store.clearActions();
        });
        it('should get MASTER_EMPLOYEE', () => {
             // lakukan pemanggilan urlnya, set status dan set value yang akan dibaca
             mock.onGet('v1/master/employee').reply(200, {
                data: [
                   { id: 1, name: 'Ridho' }
                ]
             });
             return store.dispatch(fetchMasterEmployee as any).then(() => {
                   const expectedValueOne = [{
                       data: [{
                           id: 1,
                           name: "Ridho",
                       }],
                       type: ActionTypes.SET_MASTER_EMPLOYEE,
                   }]

             expect(store.getActions()).toEqual(expectedValueOne)
        });
});

untuk method update bisa gunakan mock.onPut, method insert mock.onPost, dan method delete mock.onDelete

Sekian sharing kali ini, jika ada perlu ditanyakan atau ada cara lebih baik bisa diskusi ya