{"id":18407,"date":"2025-04-17T14:00:18","date_gmt":"2025-04-17T11:00:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angular-19da-jest-kurulumu-adim-adim-kilavuz\/"},"modified":"2025-04-17T14:00:18","modified_gmt":"2025-04-17T11:00:18","slug":"angular-19da-jest-kurulumu-adim-adim-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-19da-jest-kurulumu-adim-adim-kilavuz\/","title":{"rendered":"Angular 19’da Jest Kurulumu: Ad\u0131m Ad\u0131m K\u0131lavuz"},"content":{"rendered":"

<\/p>\n

Angular 19’da Jest Kurulumu: Ad\u0131m Ad\u0131m K\u0131lavuz<\/p>\n

Merhaba! Fatih Soysal olarak, bug\u00fcn Angular 19 projelerinizde Jest test framework’\u00fcn\u00fc nas\u0131l kolayca kuraca\u011f\u0131n\u0131z konusunda ad\u0131m ad\u0131m bir rehber haz\u0131rlad\u0131m. Jest, Facebook taraf\u0131ndan geli\u015ftirilen g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay bir JavaScript test \u00e7al\u0131\u015ft\u0131r\u0131c\u0131s\u0131d\u0131r. \u00d6zellikle Angular uygulamalar\u0131nda birim testlerini yazmak i\u00e7in ideal bir se\u00e7enektir. Bu rehberde, kurulum s\u00fcrecini ayr\u0131nt\u0131l\u0131 olarak ele alaca\u011f\u0131z ve basit bir test \u00f6rne\u011fiyle konuyu peki\u015ftirece\u011fiz.<\/p>\n

Gerekli Paketlerin Kurulumu<\/h2>\n

\u00d6ncelikle, Angular projenizin bulundu\u011fu dizinde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rman\u0131z gerekiyor. Bu komut, Jest ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 projenize ekleyecektir:<\/p>\n

npm install --save-dev jest @types\/jest ts-jest<\/code><\/pre>\n
Bu ad\u0131mda,  jest<\/code> (Jest’in kendisi), @types\/jest<\/code> (Jest’in TypeScript tan\u0131mlamalar\u0131) ve ts-jest<\/code> (TypeScript dosyalar\u0131n\u0131 Jest ile \u00e7al\u0131\u015ft\u0131rmak i\u00e7in gerekli olan bir d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc) paketlerini kurmu\u015f oluyoruz.  Kurulum tamamland\u0131ktan sonra, projenizin package.json<\/code> dosyas\u0131nda bu paketleri g\u00f6rebilirsiniz.<\/p>\n
Jest Yap\u0131land\u0131rmas\u0131<\/h2>\n
Sonraki ad\u0131mda, Jest’i Angular projenizle entegre etmek i\u00e7in bir yap\u0131land\u0131rma dosyas\u0131 olu\u015fturmam\u0131z gerekiyor.  Projenizin k\u00f6k dizinine jest.config.js<\/code> (veya jest.config.ts<\/code>) ad\u0131nda bir dosya olu\u015fturun ve a\u015fa\u011f\u0131daki i\u00e7eri\u011fi ekleyin:<\/p>\n
\nmodule.exports = {\n  preset: 'ts-jest',\n  testEnvironment: 'jsdom',\n  setupFilesAfterEnv: ['.\/setup-jest.ts']\n};\n<\/code><\/pre>\n
Bu yap\u0131land\u0131rma dosyas\u0131, Jest’e TypeScript dosyalar\u0131n\u0131 nas\u0131l i\u015fleyece\u011fini,  test ortam\u0131n\u0131 (burada taray\u0131c\u0131 benzeri bir ortam olan jsdom<\/code> kullan\u0131yoruz) ve testlerden \u00f6nce \u00e7al\u0131\u015ft\u0131r\u0131lacak bir setup dosyas\u0131n\u0131 (setup-jest.ts<\/code>) tan\u0131mlar.  setup-jest.ts<\/code> dosyas\u0131n\u0131 da olu\u015fturmay\u0131 unutmay\u0131n. Bu dosya testleriniz i\u00e7in global yap\u0131land\u0131rmalar\u0131n\u0131z\u0131 i\u00e7erebilir.  \u00d6rne\u011fin, mocking i\u015flemleri i\u00e7in burada yap\u0131land\u0131rmalar yapabilirsiniz.<\/p>\n
setup-jest.ts Dosyas\u0131n\u0131n Olu\u015fturulmas\u0131<\/h2>\n
\u015eimdi,  setup-jest.ts<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m. Bu dosya, test ortam\u0131n\u0131 haz\u0131rlamak ve Jest’in baz\u0131 k\u00fct\u00fcphaneleri daha verimli kullanmas\u0131n\u0131 sa\u011flamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin,  testlerinizde kullanaca\u011f\u0131n\u0131z mock fonksiyonlar\u0131n\u0131 burada tan\u0131mlayabilirsiniz.  Bu dosyan\u0131n i\u00e7eri\u011fi projenize g\u00f6re de\u011fi\u015fiklik g\u00f6sterebilir,  ancak basit bir \u00f6rnek olarak a\u015fa\u011f\u0131daki i\u00e7eri\u011fi kullanabilirsiniz:<\/p>\n
\nimport '@testing-library\/jest-dom';\n<\/code><\/pre>\n
Bu sat\u0131r, @testing-library\/jest-dom<\/code> k\u00fct\u00fcphanesini i\u00e7e aktar\u0131r. Bu k\u00fct\u00fcphane, DOM ile etkile\u015fimli testleri yazmay\u0131 kolayla\u015ft\u0131ran yard\u0131mc\u0131 fonksiyonlar sa\u011flar.  Bu k\u00fct\u00fcphaneyi kullanmak iste\u011fe ba\u011fl\u0131d\u0131r ancak testlerinizi yazmay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
Basit Bir Test \u00d6rne\u011fi<\/h2>\n
\u015eimdi, basit bir test \u00f6rne\u011fi yazal\u0131m.  \u00d6rne\u011fin,  bir toplama fonksiyonu i\u00e7in bir test yazal\u0131m:<\/p>\n
\n\/\/ src\/app\/math.service.ts\nexport class MathService {\n  add(a: number, b: number): number {\n    return a + b;\n  }\n}\n\n\/\/ src\/app\/math.service.spec.ts\nimport { MathService } from '.\/math.service';\n\ndescribe('MathService', () => {\n  let service: MathService;\n\n  beforeEach(() => {\n    service = new MathService();\n  });\n\n  it('should add two numbers', () => {\n    expect(service.add(2, 3)).toBe(5);\n  });\n});\n<\/code><\/pre>\n
Bu \u00f6rnekte,  MathService<\/code> ad\u0131nda basit bir servis ve bu servisi test eden bir test dosyas\u0131 olu\u015fturduk.  describe<\/code> fonksiyonu test grubunu tan\u0131mlar ve  it<\/code> fonksiyonu her bir testi tan\u0131mlar.  expect<\/code> fonksiyonu, beklenen sonu\u00e7 ile ger\u00e7ek sonucu kar\u015f\u0131la\u015ft\u0131r\u0131r.<\/p>\n
Testleri \u00c7al\u0131\u015ft\u0131rma<\/h2>\n
Son olarak, testleri \u00e7al\u0131\u015ft\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n
npm test<\/code><\/pre>\n
Bu komut, Jest’i \u00e7al\u0131\u015ft\u0131racak ve test sonu\u00e7lar\u0131n\u0131 konsolda g\u00f6sterecektir.  E\u011fer her \u015fey do\u011fru yap\u0131ld\u0131ysa, testiniz ba\u015far\u0131l\u0131 olacakt\u0131r.   Ba\u015far\u0131s\u0131z olmas\u0131 durumunda hata mesaj\u0131n\u0131 dikkatlice inceleyin ve d\u00fczeltmeler yap\u0131n.  Sorun ya\u015farsan\u0131z,  web sitemi<\/a> ziyaret edebilir veya di\u011fer kaynaklar\u0131 inceleyebilirsiniz.<\/p>\n
Faydal\u0131 Kaynaklar<\/h2>\n
Daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklara g\u00f6z atabilirsiniz:<\/p>\n