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:

Pengaturan Library Pihak Ketiga:
- Contohnya: Menginisialisasi msw untuk mocking API.
- Menyediakan global variables atau fungsi yang sering digunakan.
Persiapan Lingkungan Tes:
- Contohnya: Menambahkan polyfill untuk lingkungan Node.js atau browser yang dibutuhkan dalam pengujian.
Mocking Global:
- Mock global seperti window, fetch, atau console.
Membersihkan State Antar Tes:
- Membersihkan data yang digunakan oleh tes sebelumnya.

Cara Kerja `setup.ts`

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
     },
 });

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';

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:

Pengulangan kode di beberapa file.
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`

Efisiensi: Kode setup global ditulis sekali, digunakan di seluruh pengujian.
Keterbacaan: File pengujian lebih bersih tanpa kode setup berulang.
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! 😊

Penggunaan setup.ts di Vitest

Comments

More from this blog

Hermes vs OpenClaw (2026): Mana yang Lebih Baik untuk Developer?

Memahami Protokol Penting untuk Developer Web Modern dan Cloud Infrastructure

Mengapa Banyak Mahasiswa IT Lulus Tetapi Sulit Mendapat Pekerjaan?

OpenNext: Cara Menjalankan Next.js di Mana Saja Tanpa Terkunci Vercel

Jangan Langganan OpenCode Go Sebelum Ambil Bonus $5 Ini

Cara Kerja `setup.ts`

Kapan Menggunakan `setup.ts`?

Alternatif `setup.ts`

Contoh Lengkap

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

2. File Setup (`setup.ts`):

3. File Pengujian:

Keuntungan Menggunakan `setup.ts`

Command Palette

Comments

More from this blog

Cara Kerja setup.ts

Kapan Menggunakan setup.ts?

Alternatif setup.ts

Contoh Lengkap

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

2. File Setup (setup.ts):

3. File Pengujian:

Keuntungan Menggunakan setup.ts

Cara Kerja `setup.ts`

Kapan Menggunakan `setup.ts`?

Alternatif `setup.ts`

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

2. File Setup (`setup.ts`):

Keuntungan Menggunakan `setup.ts`