Penggunaan setup.ts di Vitest

Dalam Vitest, file setup.ts digunakan untuk menjalankan kode setup atau inisialisasi sebelum semua tes dijalankan. File ini sangat berguna untuk mengonfigurasi hal-hal yang bersifat global, seperti:

1. Pengaturan Library Pihak Ketiga:

   • Contohnya: Menginisialisasi msw untuk mocking API.

   • Menyediakan global variables atau fungsi yang sering digunakan.

2. Persiapan Lingkungan Tes:

   • Contohnya: Menambahkan polyfill untuk lingkungan Node.js atau browser yang dibutuhkan dalam pengujian.

3. Mocking Global:

   • Mock global seperti window, fetch, atau console.

4. Membersihkan State Antar Tes:

   • Membersihkan data yang digunakan oleh tes sebelumnya.

---

Cara Kerja setup.ts

1. Deklarasi di Konfigurasi Vitest Agar file setup.ts dikenali oleh Vitest, Anda harus mereferensikannya di file konfigurasi Vitest (vitest.config.ts atau vite.config.ts):

    import { defineConfig } from 'vitest/config';
   
    export default defineConfig({
        test: {
            setupFiles: './src/tests/setup.ts', // Lokasi file setup.ts
        },
    });
   

2. Kode dalam setup.ts File ini biasanya hanya berisi kode inisialisasi global. Contohnya:

    // setup.ts
   
    // Mocking API menggunakan MSW (Mock Service Worker)
    import { setupServer } from 'msw/node';
    import { rest } from 'msw';
   
    const server = setupServer(
        rest.get('/api/user', (req, res, ctx) => {
            return res(ctx.json({ username: 'test-user' }));
        })
    );
   
    beforeAll(() => server.listen());
    afterEach(() => server.resetHandlers());
    afterAll(() => server.close());
   
    // Menambahkan global variabel jika diperlukan
    globalThis.__TEST_ENV__ = 'vitest';
   

3. Akses di Pengujian Setelah setup.ts diatur, semua pengujian akan memiliki lingkungan yang telah disiapkan tanpa perlu mengulang kode setup di setiap file.

---

Kapan Menggunakan setup.ts?

Gunakan setup.ts jika:

• Anda memiliki konfigurasi global yang harus diterapkan ke semua pengujian.

• Anda ingin menghindari pengulangan kode setup di setiap file pengujian.

• Anda menggunakan library seperti:

  • MSW untuk API mocking.

  • @testing-library/react untuk pengujian React.

  • jsdom untuk simulasi DOM.

---

Alternatif setup.ts

Jika Anda tidak ingin menggunakan file terpisah (setup.ts), Anda bisa menempatkan setup langsung di dalam file pengujian. Namun, ini tidak dianjurkan untuk skenario yang membutuhkan setup global karena dapat menyebabkan:

1. Pengulangan kode di beberapa file.

2. Kesalahan konfigurasi jika pengujian kompleks.

---

Contoh Lengkap

1. File Konfigurasi (vitest.config.ts):

import { defineConfig } from 'vitest/config';

export default defineConfig({
    test: {
        setupFiles: './tests/setup.ts', // Lokasi file setup
        globals: true, // Mengaktifkan akses global
        environment: 'node', // Atur environment untuk pengujian
    },
});

2. File Setup (setup.ts):

// Setup global variabel
globalThis.BASE_URL = 'http://localhost:3000';

// Mock console untuk menghindari spam di log
global.console = {
    ...console,
    log: jest.fn(),
    warn: jest.fn(),
    error: jest.fn(),
};

3. File Pengujian:

import { describe, it, expect } from 'vitest';

describe('Global Setup', () => {
    it('should access global BASE_URL', () => {
        expect(globalThis.BASE_URL).toBe('http://localhost:3000');
    });
});

---

Keuntungan Menggunakan setup.ts

1. Efisiensi: Kode setup global ditulis sekali, digunakan di seluruh pengujian.

2. Keterbacaan: File pengujian lebih bersih tanpa kode setup berulang.

3. Fleksibilitas: Memudahkan integrasi dengan library eksternal atau konfigurasi kompleks.

Jika Anda masih memiliki pertanyaan atau ingin contoh penggunaan setup.ts yang lebih spesifik, beri tahu saya! 😊