Test

Bileşenler ve culet'ler düz fonksiyonlar olduğundan ikisi de doğrudan test edilebilir. DOM ortamına da işleme kütüphanesine de gerek yoktur.

Kurulum

Test betiği, V8 kapsamıyla Vitest çalıştırır. Giriş noktalarını, facet dosyasını ve DTO klasörünü kapsam dışı bırakın; bunlar mantıktan çok bağlantıdır.

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      reporter: [
        "text",
        "html",
        "lcov"
      ],
      include: ['src/**/*.{ts,tsx}'],
      exclude: [
        'src/client/entrypoint.ts',
        'src/server/entrypoint.ts',
        'src/client/facets.cara.ts',
        'src/infra/**/*',
        'src/dto/**/*',
        '**/*.d.ts',
      ],
    },
  },
});

Bir Bileşeni Test Etme

Derleyiciyi kurmak için jjsx'den init'i bir kez çağırın, sonra HTML dizesini almak üzere transpile'ı bir JSX öğesiyle çağırın. Bu dizenin alt dizeleri üzerinde doğrulama yapmak genellikle yeterlidir ve testi DOM'dan kurtarır.

// src/client/__tests__/profile-page.test.tsx
import { expect, test } from "vitest";
import { init, transpile } from "jjsx";
import Profile from "../pages/profile";

init();

test("Render profile page", () => {
    const mockUser = {
        id: "1",
        name: "John Doe",
        email: "john@example.com",
        username: "johndoe",
        phone: "123-456-7890",
        website: "johndoe.com",
    };

    const page = transpile(<Profile {...mockUser} />);

    expect(page).toContain('app-header');
    expect(page).toContain("John Doe");
    expect(page).toContain("john@example.com");
    expect(page).toContain("Vault Member");
});

Burnished bir bileşen, sunucu prop'larını sıradan prop'lar olarak kabul eder; bu yüzden aynı öğe, testte sunucuda olduğu gibi sahte veriyle işlenir.

`init()` JJSX derleyicisini kurar ve ilk `transpile` çağrısından önce çalışmalıdır. Sonuç düz bir HTML dizesi olduğu için kurulacak bir DOM ve yapılandırılacak bir işleme kütüphanesi yoktur.

Bir Culet'i Test Etme

Bir culet, istekten değere giden bir fonksiyondur. params içeren düz bir nesne geçirip çağırın. Başlatılacak sunucu yoktur; culet'lerin ucuz test edilmesinin ana nedeni budur.

// src/server/__tests__/trade-api.test.ts
import { describe, expect, test } from "vitest";
import getTradeData from "../culets/trade";

describe("Trade API", () => {
    test("GET /trade/btc", async () => {
        const mockRequest = {
            params: { symbol: "btc" },
            url: "/trade/btc",
            query: {},
            headers: {},
            cookies: {},
            method: "GET",
        };
        const result = await getTradeData(mockRequest);
        expect(result.symbol).toBe("BTC");
        expect(result.price).toBeDefined();
        expect(result.orderBook.bids.length).toBeGreaterThan(0);
    });
});

Uzak bir API çağıran bir culet için `@fetch-mock/vitest` kullanılabilir; bu da testi çevrimdışı ve belirlenimci tutar.

Kapsam

Gövdesinde doğrudan `window` veya `document` okuyan bir bileşen testte derlenemez, çünkü test ortamında belge yoktur. Bu bir engel değil, faydalı bir işarettir: yan etkinin framework'ün sunucu işlemesinden zaten uzak tuttuğu bir afterMount veya beforeMount geri çağrısına ait olduğu anlamına gelir.