TESTING DOCS

UNIT-TESTING

Jest - test() / it()
Description: Mendefinisikan sebuah unit test.
Example: 
test('menjumlahkan 1 + 2 sama dengan 3', () => {
  expect(1 + 2).toBe(3)
})
Output: ✓ menjumlahkan 1 + 2 sama dengan 3
Vitest - test() / it()
Description: Unit test dengan Vitest (API kompatibel Jest).
Example: 
import { test, expect } from 'vitest'
test('perkalian 2 * 3 = 6', () => {
  expect(2 * 3).toBe(6)
})
Output: ✓ perkalian 2 * 3 = 6
describe() block
Description: Mengelompokkan beberapa test.
Example: 
describe('Math operations', () => {
  test('add', () => { ... })
  test('subtract', () => { ... })
})
Output: Math operations > add ✓, subtract ✓

MATCHERS

toBe()
Description: Membandingkan nilai primitive secara strict (===).
Example: 
expect(2 + 2).toBe(4)
Output: Pass jika hasil 4
toEqual()
Description: Deep equality untuk objek/array.
Example: 
expect({ a: 1 }).toEqual({ a: 1 })
Output: Pass jika struktur sama
toBeTruthy / toBeFalsy
Description: Memeriksa apakah nilai truthy atau falsy.
Example: 
expect(true).toBeTruthy()
expect(0).toBeFalsy()
Output: Pass sesuai kondisi
toContain()
Description: Memeriksa apakah array/string mengandung nilai.
Example: 
expect(['apel', 'jeruk']).toContain('apel')
Output: Pass
toHaveLength()
Description: Memeriksa panjang array/string.
Example: 
expect('hello').toHaveLength(5)
Output: Pass
toThrow()
Description: Memastikan fungsi melempar error.
Example: 
expect(() => { throw new Error('fail') }).toThrow('fail')
Output: Pass
toMatchSnapshot()
Description: Membandingkan dengan snapshot yang tersimpan.
Example: 
expect(component).toMatchSnapshot()
Output: Snapshot cocok atau baru dibuat

REACT-COMPONENT-TESTING

render()
Description: Merender komponen React untuk testing (React Testing Library).
Example: 
import { render } from '@testing-library/react'
render(<Button label="Click" />)
Output: Komponen terender di JSDOM
screen.getByText()
Description: Mencari elemen berdasarkan teks.
Example: 
expect(screen.getByText('Click')).toBeInTheDocument()
Output: Pass jika teks ditemukan
screen.getByRole()
Description: Mencari elemen berdasarkan ARIA role.
Example: 
screen.getByRole('button', { name: /click/i })
Output: Elemen tombol
fireEvent.click()
Description: Mensimulasikan event klik pada elemen.
Example: 
fireEvent.click(screen.getByRole('button'))
Output: Handler onClick terpicu
userEvent (Testing Library)
Description: Simulasi interaksi user yang lebih realistis.
Example: 
import userEvent from '@testing-library/user-event'
await userEvent.click(button)
Output: Klik diproses

E2E-TESTING

Playwright - Test
Description: E2E testing dengan browser nyata.
Example: 
import { test, expect } from '@playwright/test'
test('homepage memiliki judul', async ({ page }) => {
  await page.goto('http://localhost:3000')
  await expect(page).toHaveTitle(/Dokumentasi/)
})
Output: Pass
Playwright - locator
Description: Mencari elemen di halaman.
Example: 
page.locator('button#submit')
Output: Locator siap digunakan
Cypress - Test
Description: E2E testing dengan Cypress.
Example: 
describe('Homepage', () => {
  it('menampilkan judul', () => {
    cy.visit('/')
    cy.contains('Dokumentasi')
  })
})
Output: Pass
Cypress - cy.get() / cy.contains()
Description: Mencari elemen di halaman.
Example: 
cy.get('.btn').click()
Output: Klik tombol

MOCKING

jest.fn()
Description: Membuat fungsi mock.
Example: 
const mockFn = jest.fn()
mockFn()
expect(mockFn).toHaveBeenCalled()
Output: Pass
vi.fn() (Vitest)
Description: Fungsi mock di Vitest.
Example: 
import { vi } from 'vitest'
const mockFn = vi.fn()
Output: Fungsi mock
jest.spyOn()
Description: Memata-matai method pada objek.
Example: 
const spy = jest.spyOn(console, 'log')
expect(spy).toHaveBeenCalledWith('hello')
Output: Spy aktif
Mock Module
Description: Mengganti module dengan versi mock.
Example: 
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: {} }))
}))
Output: Axios diganti mock

SNAPSHOT-TESTING

toMatchSnapshot()
Description: Membandingkan output dengan file snapshot.
Example: 
expect(tree).toMatchSnapshot()
Output: File .snap diperbarui jika berbeda
toMatchInlineSnapshot()
Description: Snapshot disimpan langsung dalam kode tes.
Example: 
expect(result).toMatchInlineSnapshot(`"expected value"`)
Output: Snapshot inline

CONFIGURATION

vitest.config.ts
Description: Konfigurasi Vitest di proyek.
Example: 
import { defineConfig } from 'vitest/config'
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts'
  }
})
Output: Vitest siap
jest.config.ts
Description: Konfigurasi Jest.
Example: 
import type { Config } from 'jest'
const config: Config = {
  testEnvironment: 'jsdom',
  setupFilesAfterSetup: ['<rootDir>/jest.setup.ts']
}
export default config
Output: Jest siap
playwright.config.ts
Description: Konfigurasi Playwright.
Example: 
import { defineConfig } from '@playwright/test'
export default defineConfig({
  use: { baseURL: 'http://localhost:3000' },
  webServer: { command: 'pnpm dev', port: 3000 }
})
Output: Playwright siap
cypress.config.ts
Description: Konfigurasi Cypress.
Example: 
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e: { baseUrl: 'http://localhost:3000' }
})
Output: Cypress siap