# 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`):
    
    ```typescript
    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:
    
    ```typescript
    // 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`):

```typescript
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`):

```typescript
// 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:**

```typescript
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! 😊