Angular 19’da Jest Kurulumu: Adım Adım Kılavuz

Angular 19’da Jest Kurulumu: Adım Adım Kılavuz

Merhaba! Fatih Soysal olarak, bugün Angular 19 projelerinizde Jest test framework’ünü nasıl kolayca kuracağınız konusunda adım adım bir rehber hazırladım. Jest, Facebook tarafından geliştirilen güçlü ve kullanımı kolay bir JavaScript test çalıştırıcısıdır. Özellikle Angular uygulamalarında birim testlerini yazmak için ideal bir seçenektir. Bu rehberde, kurulum sürecini ayrıntılı olarak ele alacağız ve basit bir test örneğiyle konuyu pekiştireceğiz.

Gerekli Paketlerin Kurulumu

Öncelikle, Angular projenizin bulunduğu dizinde aşağıdaki komutu çalıştırmanız gerekiyor. Bu komut, Jest ve gerekli bağımlılıklarını projenize ekleyecektir:

npm install --save-dev jest @types/jest ts-jest

Bu adımda, jest (Jest’in kendisi), @types/jest (Jest’in TypeScript tanımlamaları) ve ts-jest (TypeScript dosyalarını Jest ile çalıştırmak için gerekli olan bir dönüştürücü) paketlerini kurmuş oluyoruz. Kurulum tamamlandıktan sonra, projenizin package.json dosyasında bu paketleri görebilirsiniz.

Jest Yapılandırması

Sonraki adımda, Jest’i Angular projenizle entegre etmek için bir yapılandırma dosyası oluşturmamız gerekiyor. Projenizin kök dizinine jest.config.js (veya jest.config.ts) adında bir dosya oluşturun ve aşağıdaki içeriği ekleyin:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['./setup-jest.ts']
};

Bu yapılandırma dosyası, Jest’e TypeScript dosyalarını nasıl işleyeceğini, test ortamını (burada tarayıcı benzeri bir ortam olan jsdom kullanıyoruz) ve testlerden önce çalıştırılacak bir setup dosyasını (setup-jest.ts) tanımlar. setup-jest.ts dosyasını da oluşturmayı unutmayın. Bu dosya testleriniz için global yapılandırmalarınızı içerebilir. Örneğin, mocking işlemleri için burada yapılandırmalar yapabilirsiniz.

setup-jest.ts Dosyasının Oluşturulması

Şimdi, setup-jest.ts dosyasını oluşturalım. Bu dosya, test ortamını hazırlamak ve Jest’in bazı kütüphaneleri daha verimli kullanmasını sağlamak için kullanışlıdır. Örneğin, testlerinizde kullanacağınız mock fonksiyonlarını burada tanımlayabilirsiniz. Bu dosyanın içeriği projenize göre değişiklik gösterebilir, ancak basit bir örnek olarak aşağıdaki içeriği kullanabilirsiniz:

import '@testing-library/jest-dom';

Bu satır, @testing-library/jest-dom kütüphanesini içe aktarır. Bu kütüphane, DOM ile etkileşimli testleri yazmayı kolaylaştıran yardımcı fonksiyonlar sağlar. Bu kütüphaneyi kullanmak isteğe bağlıdır ancak testlerinizi yazmayı kolaylaştırır.

Basit Bir Test Örneği

Şimdi, basit bir test örneği yazalım. Örneğin, bir toplama fonksiyonu için bir test yazalım:

// src/app/math.service.ts
export class MathService {
  add(a: number, b: number): number {
    return a + b;
  }
}

// src/app/math.service.spec.ts
import { MathService } from './math.service';

describe('MathService', () => {
  let service: MathService;

  beforeEach(() => {
    service = new MathService();
  });

  it('should add two numbers', () => {
    expect(service.add(2, 3)).toBe(5);
  });
});

Bu örnekte, MathService adında basit bir servis ve bu servisi test eden bir test dosyası oluşturduk. describe fonksiyonu test grubunu tanımlar ve it fonksiyonu her bir testi tanımlar. expect fonksiyonu, beklenen sonuç ile gerçek sonucu karşılaştırır.

Testleri Çalıştırma

Son olarak, testleri çalıştırmak için aşağıdaki komutu kullanabilirsiniz:

npm test

Bu komut, Jest’i çalıştıracak ve test sonuçlarını konsolda gösterecektir. Eğer her şey doğru yapıldıysa, testiniz başarılı olacaktır. Başarısız olması durumunda hata mesajını dikkatlice inceleyin ve düzeltmeler yapın. Sorun yaşarsanız, web sitemi ziyaret edebilir veya diğer kaynakları inceleyebilirsiniz.

Faydalı Kaynaklar

Daha fazla bilgi için aşağıdaki kaynaklara göz atabilirsiniz:

• Jest Resmi Dokümanları
• Orjinal Makale (İngilizce)
• Angular Test Kılavuzu

Umarım bu rehber, Angular 19 projelerinizde Jest kurulumunu kolaylaştırır. Sorularınız veya önerileriniz varsa, yorum bölümünde bana ulaşabilirsiniz!

#Etiketler: Angular, Jest, Angular 19, Test, Kurulum, Birim Testi, JavaScript, TypeScript, Testing Framework, npm, jest.config.js, ts-jest, @types/jest, setup-jest.ts, @testing-library/jest-dom