Mocking #

Mocking di TypeScript adalah teknik yang digunakan dalam pengujian perangkat lunak untuk menggantikan atau memalsukan (mock) bagian tertentu dari kode yang sulit atau tidak praktis untuk diuji secara langsung. Misalnya, saat menulis unit test, Anda mungkin perlu menguji fungsi yang bergantung pada layanan eksternal atau database, yang tidak ingin Anda akses selama pengujian. Dengan mocking, Anda dapat membuat versi “tiruan” dari layanan tersebut yang meniru perilaku yang diharapkan, memungkinkan pengujian yang lebih cepat dan lebih dapat diandalkan.

Mengapa Menggunakan Mocking? #

Mocking sangat berguna dalam pengujian karena:

• Isolasi: Membantu menguji fungsi atau metode dalam isolasi tanpa tergantung pada bagian lain dari sistem.
• Kecepatan: Menghindari panggilan ke layanan eksternal atau operasi yang lambat, seperti operasi database atau jaringan.
• Keandalan: Menghindari ketergantungan pada layanan atau data eksternal yang mungkin tidak stabil atau tidak tersedia selama pengujian.
• Kontrol: Memberikan kontrol penuh atas input dan output dari fungsi yang diuji, memungkinkan pengujian berbagai skenario.

Dasar Mocking dengan Jasmine dan Jest #

TypeScript sering digunakan bersama dengan framework pengujian seperti Jasmine atau Jest, yang memiliki dukungan built-in untuk mocking.

Mocking dengan Jasmine #

Jasmine adalah framework pengujian yang populer, terutama di aplikasi Angular. Di Jasmine, Anda dapat menggunakan spyOn untuk membuat mock dari metode atau fungsi.

Contoh:

class DataService {
    fetchData(): string {
        // Asumsikan ini melakukan panggilan API yang sebenarnya
        return "real data";
    }
}

class MyComponent {
    constructor(private dataService: DataService) {}

    getData(): string {
        return this.dataService.fetchData();
    }
}

// Test menggunakan Jasmine
describe('MyComponent', () => {
    let dataService: DataService;
    let component: MyComponent;

    beforeEach(() => {
        dataService = new DataService();
        component = new MyComponent(dataService);
    });

    it('should return mocked data', () => {
        spyOn(dataService, 'fetchData').and.returnValue('mocked data');

        expect(component.getData()).toBe('mocked data');
    });
});

• spyOn: Membuat spy pada metode fetchData dari dataService, yang kemudian dimock untuk mengembalikan 'mocked data' alih-alih menjalankan implementasi sebenarnya.
• and.returnValue: Menentukan nilai yang harus dikembalikan oleh mock ketika metode tersebut dipanggil.

Mocking dengan Jest #

Jest adalah framework pengujian lain yang sangat populer, dengan fitur mocking yang kuat. Jest sering digunakan dengan React, Node.js, dan TypeScript.

Contoh:

class DataService {
    fetchData(): string {
        return "real data";
    }
}

class MyComponent {
    constructor(private dataService: DataService) {}

    getData(): string {
        return this.dataService.fetchData();
    }
}

// Test menggunakan Jest
describe('MyComponent', () => {
    let dataService: DataService;
    let component: MyComponent;

    beforeEach(() => {
        dataService = new DataService();
        component = new MyComponent(dataService);
    });

    it('should return mocked data', () => {
        jest.spyOn(dataService, 'fetchData').mockReturnValue('mocked data');

        expect(component.getData()).toBe('mocked data');
    });
});

• jest.spyOn: Membuat spy pada metode fetchData dan memock-nya untuk mengembalikan 'mocked data'.
• mockReturnValue: Digunakan untuk mengatur nilai yang dikembalikan oleh mock.

Manual Mocking #

Selain menggunakan tool bawaan seperti spyOn dan jest.spyOn, Anda juga dapat membuat mock secara manual, terutama jika Anda ingin memiliki kontrol penuh atas perilaku mock.

Contoh:

class DataService {
    fetchData(): string {
        return "real data";
    }
}

class MyComponent {
    constructor(private dataService: DataService) {}

    getData(): string {
        return this.dataService.fetchData();
    }
}

// Mock manual
class MockDataService {
    fetchData(): string {
        return 'mocked data';
    }
}

// Test dengan mock manual
describe('MyComponent', () => {
    it('should return mocked data', () => {
        const mockDataService = new MockDataService();
        const component = new MyComponent(mockDataService as any);

        expect(component.getData()).toBe('mocked data');
    });
});

• Di sini, MockDataService adalah kelas yang sepenuhnya menggantikan DataService selama pengujian.
• as any digunakan untuk memaksa TypeScript menerima tipe yang mungkin tidak sepenuhnya cocok.

Mocking Module dengan Jest #

Jest juga memungkinkan Anda untuk memock seluruh modul, yang sangat berguna ketika Anda perlu menggantikan seluruh pustaka atau bagian besar dari kode.

Contoh:

// Original module (dataService.ts)
export function fetchData(): string {
    return "real data";
}

// Component yang menggunakan module
import * as DataService from './dataService';

class MyComponent {
    getData(): string {
        return DataService.fetchData();
    }
}

// Test dengan module mocking di Jest
jest.mock('./dataService', () => ({
    fetchData: jest.fn(() => 'mocked data')
}));

describe('MyComponent', () => {
    it('should return mocked data from module', () => {
        const component = new MyComponent();
        expect(component.getData()).toBe('mocked data');
    });
});

• jest.mock: Memmock seluruh modul dataService.ts, menggantikan implementasi asli dengan implementasi yang dimock.

Menggunakan Mock Library Pihak Ketiga #

Selain Jasmine dan Jest, Anda juga dapat menggunakan pustaka pihak ketiga untuk melakukan mocking, seperti Sinon.js. Sinon menawarkan lebih banyak fitur seperti spies, stubs, dan mocks dengan berbagai macam konfigurasi.

Contoh Menggunakan Sinon:

import * as sinon from 'sinon';

describe('MyComponent', () => {
    let dataService: DataService;
    let component: MyComponent;

    beforeEach(() => {
        dataService = new DataService();
        component = new MyComponent(dataService);
    });

    it('should return mocked data', () => {
        const stub = sinon.stub(dataService, 'fetchData').returns('mocked data');

        expect(component.getData()).toBe('mocked data');

        stub.restore(); // Mengembalikan ke implementasi asli
    });
});

• sinon.stub: Membuat stub pada metode fetchData, menggantikan fungsinya dengan implementasi yang dimock.

Kesimpulan #

Mocking di TypeScript adalah teknik penting dalam pengujian untuk memastikan bahwa kode diuji dalam isolasi tanpa ketergantungan pada layanan eksternal atau bagian kode lain yang kompleks. TypeScript dapat memanfaatkan alat seperti Jasmine, Jest, dan Sinon untuk melakukan mocking dengan mudah, sehingga memungkinkan pengujian yang lebih cepat, aman, dan dapat diandalkan.