Yaz\u0131l\u0131m geli\u015ftirme s\u00fcre\u00e7lerinde test, kod kalitesini, g\u00fcvenilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini sa\u011flaman\u0131n temel ta\u015flar\u0131ndan biridir. \u00d6zellikle dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirdi\u011fimiz Vue.js gibi modern frontend framework’lerinde testin \u00f6nemi katlanarak artmaktad\u0131r. Testler, kodunuzun beklendi\u011fi gibi \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamakla kalmaz, ayn\u0131 zamanda gelecekte yap\u0131lacak de\u011fi\u015fikliklerin mevcut i\u015flevselli\u011fi bozmad\u0131\u011f\u0131n\u0131 garanti eden bir g\u00fcvenlik a\u011f\u0131 g\u00f6revi g\u00f6r\u00fcr. Bu, geli\u015ftiricilerin daha g\u00fcvenle kod yazmas\u0131na, yeni \u00f6zellikler eklemesine ve mevcut kodu refactor etmesine olanak tan\u0131r.<\/p>\n
Vue.js uygulamalar\u0131 \u00f6zelinde test yapmak, bile\u015fenlerin do\u011fru \u015fekilde render edildi\u011finden, kullan\u0131c\u0131 etkile\u015fimlerine beklenen tepkileri verdi\u011finden ve veri ak\u0131\u015f\u0131n\u0131n tutarl\u0131 oldu\u011fundan emin olmam\u0131z\u0131 sa\u011flar. Karma\u015f\u0131k bile\u015fen a\u011flar\u0131nda veya b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, manuel testler zaman al\u0131c\u0131, hataya a\u00e7\u0131k ve yetersiz kalabilir. Otomatik testler ise bu s\u00fcreci h\u0131zland\u0131r\u0131r, tutarl\u0131l\u0131k sa\u011flar ve regresyon hatalar\u0131n\u0131n erken a\u015famada tespit edilmesine yard\u0131mc\u0131 olur. Bu makalede, Vue.js uygulamalar\u0131n\u0131z\u0131 test etmek i\u00e7in pop\u00fcler ve g\u00fc\u00e7l\u00fc bir JavaScript test \u00e7at\u0131s\u0131 olan Jest’i ve Vue.js’in resmi test yard\u0131mc\u0131 k\u00fct\u00fcphanesi Vue Test Utils’i nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Jest’in h\u0131z\u0131, esnekli\u011fi ve zengin \u00f6zellik seti, Vue bile\u015fenlerinizi birim, entegrasyon ve snapshot testleri ile kapsaml\u0131 bir \u015fekilde test etmek i\u00e7in ideal bir se\u00e7imdir.<\/p>\n
Yaz\u0131l\u0131m testleri, test edilen kapsam ve amaca g\u00f6re farkl\u0131 t\u00fcrlere ayr\u0131l\u0131r. Vue.js uygulamalar\u0131n\u0131 test ederken genellikle birim, entegrasyon ve snapshot testleri \u00f6ne \u00e7\u0131kar. U\u00e7tan Uca (E2E) testler de \u00f6nemli olmakla birlikte, genellikle Cypress veya Playwright gibi farkl\u0131 ara\u00e7larla ger\u00e7ekle\u015ftirilir.<\/p>\n
Birim testleri, uygulaman\u0131z\u0131n en k\u00fc\u00e7\u00fck, izole edilebilir par\u00e7alar\u0131n\u0131 (birimlerini) test etmeye odaklan\u0131r. Vue.js ba\u011flam\u0131nda bu birimler genellikle tek bir bile\u015fen, bir yard\u0131mc\u0131 fonksiyon, bir Vuex mod\u00fcl\u00fc veya bir JavaScript s\u0131n\u0131f\u0131 olabilir. Birim testlerinin amac\u0131, her birimin tek ba\u015f\u0131na do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamakt\u0131r. Di\u011fer birimlerle olan ba\u011f\u0131ml\u0131l\u0131klar genellikle mock’lan\u0131r (sahte nesnelerle de\u011fi\u015ftirilir) veya stub’lan\u0131r (basit bir davran\u0131\u015fla taklit edilir), b\u00f6ylece sadece test edilen birimin kendi mant\u0131\u011f\u0131na odaklan\u0131labilir. Bu, hatalar\u0131n kayna\u011f\u0131n\u0131 h\u0131zl\u0131 bir \u015fekilde tespit etmeye ve izole etmeye yard\u0131mc\u0131 olur. Vue bile\u015fenleri i\u00e7in birim testleri, bile\u015fenin props’lar\u0131 do\u011fru i\u015fleyip i\u015flemedi\u011fini, computed property’lerin beklenen de\u011ferleri d\u00f6nd\u00fcr\u00fcp d\u00f6nd\u00fcrmedi\u011fini, metodlar\u0131n do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve olaylar\u0131 (events) d\u00fczg\u00fcn bir \u015fekilde yayd\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Entegrasyon testleri, birden fazla birimin veya mod\u00fcl\u00fcn bir araya gelerek do\u011fru \u015fekilde etkile\u015fim kurup kurmad\u0131\u011f\u0131n\u0131 kontrol eder. Vue.js uygulamalar\u0131nda bu, bir ebeveyn bile\u015fenin \u00e7ocuk bile\u015fenleriyle veya bir bile\u015fenin Vuex store’u ya da bir API servisiyle etkile\u015fimini test etmek anlam\u0131na gelebilir. Entegrasyon testleri, birim testlerinden daha geni\u015f bir kapsam\u0131 hedefler ve farkl\u0131 par\u00e7alar\u0131n birle\u015fti\u011finde ortaya \u00e7\u0131kabilecek sorunlar\u0131 yakalamaya \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, bir form bile\u015feninin kullan\u0131c\u0131 giri\u015fini al\u0131p, bir Vuex aksiyonunu tetikleyerek veriyi store’a g\u00f6ndermesi ve ard\u0131ndan ba\u015fka bir bile\u015fenin bu veriyi g\u00f6r\u00fcnt\u00fclemesi bir entegrasyon testi senaryosu olabilir. Bu testler, sistemin farkl\u0131 katmanlar\u0131 aras\u0131ndaki aray\u00fczlerin ve veri ak\u0131\u015f\u0131n\u0131n d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
Snapshot testleri, Jest’in sundu\u011fu benzersiz ve g\u00fc\u00e7l\u00fc bir test t\u00fcr\u00fcd\u00fcr. Bu testler, bir bile\u015fenin render edilmi\u015f \u00e7\u0131kt\u0131s\u0131n\u0131n (genellikle HTML yap\u0131s\u0131n\u0131n) veya bir objenin JSON temsilinin bir “snapshot”\u0131n\u0131 al\u0131r ve bu snapshot’\u0131 diskte saklar. Sonraki test \u00e7al\u0131\u015ft\u0131rmalar\u0131nda, ayn\u0131 bile\u015fenin \u00e7\u0131kt\u0131s\u0131 yeniden render edilir ve kaydedilmi\u015f snapshot ile kar\u015f\u0131la\u015ft\u0131r\u0131l\u0131r. E\u011fer iki \u00e7\u0131kt\u0131 aras\u0131nda bir fark varsa, test ba\u015far\u0131s\u0131z olur. Snapshot testleri, \u00f6zellikle kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerinin beklenmedik g\u00f6rsel de\u011fi\u015fikliklerini veya yap\u0131sal regresyonlar\u0131n\u0131 tespit etmek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Bir bile\u015fenin HTML yap\u0131s\u0131n\u0131n, CSS s\u0131n\u0131flar\u0131n\u0131n veya i\u00e7indeki metinlerin yanl\u0131\u015fl\u0131kla de\u011fi\u015fip de\u011fi\u015fmedi\u011fini h\u0131zl\u0131ca kontrol etmenizi sa\u011flar. Ancak, snapshot’lar\u0131n dikkatli y\u00f6netilmesi gerekir, \u00e7\u00fcnk\u00fc kas\u0131tl\u0131 de\u011fi\u015fikliklerde snapshot’lar\u0131n g\u00fcncellenmesi unutulursa yan\u0131lt\u0131c\u0131 olabilirler.<\/p>\n
Vue.js uygulamalar\u0131n\u0131 test etmek i\u00e7in iki ana araca ihtiyac\u0131m\u0131z var: Jest ve Vue Test Utils. Bu ikili, Vue bile\u015fenlerini verimli ve etkili bir \u015fekilde test etmek i\u00e7in g\u00fc\u00e7l\u00fc bir kombinasyon sunar.<\/p>\n
Jest, Facebook taraf\u0131ndan geli\u015ftirilen pop\u00fcler bir JavaScript test \u00e7at\u0131s\u0131d\u0131r. H\u0131zl\u0131, esnek ve \u00f6zelliklerle dolu olmas\u0131yla bilinir. Jest, s\u0131f\u0131r yap\u0131land\u0131rma ile (zero-config) \u00e7al\u0131\u015fabilme yetene\u011fi, kapsaml\u0131 bir test ko\u015fucusu, assertion k\u00fct\u00fcphanesi, mocking yetenekleri ve snapshot test deste\u011fi gibi bir\u00e7ok \u00f6zelli\u011fi b\u00fcnyesinde bar\u0131nd\u0131r\u0131r. React uygulamalar\u0131 i\u00e7in geli\u015ftirilmi\u015f olsa da, Babel ile birlikte kullan\u0131ld\u0131\u011f\u0131nda Vue.js, Angular veya Node.js gibi di\u011fer JavaScript ortamlar\u0131nda da sorunsuz \u00e7al\u0131\u015f\u0131r. Jest’in temel avantajlar\u0131 \u015funlard\u0131r: Vue Test Utils, Vue.js bile\u015fenlerini test etmek i\u00e7in resmi yard\u0131mc\u0131 k\u00fct\u00fcphanedir. Jest gibi genel bir test \u00e7at\u0131s\u0131, Vue bile\u015fenlerini do\u011frudan DOM ortam\u0131nda render edip onlarla etkile\u015fim kurma yetene\u011fine sahip de\u011fildir. Vue Test Utils, bu bo\u015flu\u011fu doldurur. Bile\u015fenleri izole bir \u015fekilde render etmeyi, props g\u00f6ndermeyi, olaylar\u0131 tetiklemeyi, slotlar\u0131 kontrol etmeyi, DOM elementlerine eri\u015fmeyi ve bile\u015fenin i\u00e7 state’ini g\u00f6zlemlemeyi sa\u011flayan bir dizi yard\u0131mc\u0131 fonksiyon ve metot sunar. Vue Test Utils’in temel faydalar\u0131 \u015funlard\u0131r: Vue projenize Jest ve Vue Test Utils’i eklemek olduk\u00e7a basittir. Genellikle Vue CLI ile bir proje olu\u015ftururken test se\u00e7eneklerini se\u00e7ti\u011finizde bu kurulum otomatik olarak yap\u0131l\u0131r. Ancak manuel kurulum i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n 1. Gerekli Paketleri Y\u00fckleme:<\/strong><\/p>\n * 2. Bu yap\u0131land\u0131rma, 3. Bu, Jest’in Node.js ortam\u0131nda \u00e7al\u0131\u015f\u0131rken modern JavaScript s\u00f6zdizimini anlayabilmesini sa\u011flar.<\/p>\n Bu kurulum ad\u0131mlar\u0131yla Jest ve Vue Test Utils, Vue.js projenizde test yazmaya haz\u0131r hale gelir.<\/p>\n Vue bile\u015fenleri, uygulaman\u0131z\u0131n temel yap\u0131 ta\u015flar\u0131d\u0131r ve do\u011fru \u00e7al\u0131\u015ft\u0131klar\u0131ndan emin olmak, uygulaman\u0131n genel sa\u011fl\u0131\u011f\u0131 i\u00e7in kritik \u00f6neme sahiptir. Vue Test Utils, bile\u015fenlerinizi izole bir \u015fekilde test etmek i\u00e7in g\u00fc\u00e7l\u00fc bir API sunar.<\/p>\n Bir Vue bile\u015fenini test etmenin en temel yolu, onu render etmek ve \u00e7\u0131kt\u0131s\u0131n\u0131 kontrol etmektir. Vue Test Utils, bile\u015fenleri render etmek i\u00e7in * \u00d6rnek Senaryo:<\/strong> Basit bir {{ greetingMessage }}<\/p>\n <\/div>\n<\/template>\n\n
\n* H\u0131zl\u0131 \u00c7al\u0131\u015fma:<\/strong> Testleri paralel olarak \u00e7al\u0131\u015ft\u0131rarak h\u0131zl\u0131 geri bildirim sa\u011flar.
\n* Kapsaml\u0131 Ara\u00e7 Seti:<\/strong> Assertion k\u00fct\u00fcphanesi (expect<\/code>), mocking fonksiyonlar\u0131 (jest.fn()<\/code>, jest.spyOn()<\/code>), test ko\u015fucusu ve kapsam raporlama gibi t\u00fcm ihtiya\u00e7lar\u0131 kar\u015f\u0131lar.
\n* Snapshot Testleri:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerinin g\u00f6rsel regresyonlar\u0131n\u0131 yakalamak i\u00e7in e\u015fsiz bir yetenek sunar.
\n* \u0130yi Raporlama:<\/strong> Test sonu\u00e7lar\u0131n\u0131 ve kapsam raporlar\u0131n\u0131 anla\u015f\u0131l\u0131r bir \u015fekilde sunar.
\n* Geli\u015ftirici Deneyimi:<\/strong> Otomatik dosya izleme (--watch<\/code>) ve test \u00e7al\u0131\u015ft\u0131rma gibi \u00f6zelliklerle geli\u015ftirici deneyimini iyile\u015ftirir.<\/p>\nVue Test Utils Nedir?<\/h4>\n
\n* Bile\u015fenleri \u0130zole Etme:<\/strong> mount<\/code> ve shallowMount<\/code> gibi metotlarla bile\u015fenleri ba\u011f\u0131ms\u0131z olarak render etmeyi sa\u011flar.
\n* Etkile\u015fim Sim\u00fclasyonu:<\/strong> Kullan\u0131c\u0131 etkile\u015fimlerini (t\u0131klama, giri\u015f, form g\u00f6nderme vb.) sim\u00fcle etmek i\u00e7in trigger<\/code> gibi metotlar sunar.
\n* DOM Sorgulama:<\/strong> Bile\u015fenin render etti\u011fi DOM yap\u0131s\u0131 i\u00e7inde elementleri bulmak ve \u00fczerlerinde assertion yapmak i\u00e7in find<\/code>, findAll<\/code>, text<\/code>, html<\/code> gibi metotlar sa\u011flar.
\n* Vuex ve Vue Router Entegrasyonu:<\/strong> Bu k\u00fct\u00fcphanelerle entegre \u00e7al\u0131\u015fan bile\u015fenleri test etmek i\u00e7in kolay mocklama mekanizmalar\u0131 sunar.
\n* Basit API:<\/strong> Sezgisel ve kullan\u0131m\u0131 kolay bir API ile Vue bile\u015fen testlerini basitle\u015ftirir.<\/p>\nKurulum ve Temel Yap\u0131land\u0131rma<\/h4>\n
npm install --save-dev @vue\/test-utils jest babel-jest @babel\/core @babel\/preset-env vue-jest\n # veya\n yarn add --dev @vue\/test-utils jest babel-jest @babel\/core @babel\/preset-env vue-jest<\/code><\/pre>\n@vue\/test-utils<\/code>: Vue Test Utils k\u00fct\u00fcphanesi.
\n * jest<\/code>: Jest test \u00e7at\u0131s\u0131.
\n * babel-jest<\/code>, @babel\/core<\/code>, @babel\/preset-env<\/code>: Jest’in ES mod\u00fcllerini ve Vue tek dosya bile\u015fenlerini anlayabilmesi i\u00e7in Babel entegrasyonu.
\n * vue-jest<\/code>: Vue tek dosya bile\u015fenlerini Jest’in anlayaca\u011f\u0131 JavaScript’e d\u00f6n\u00fc\u015ft\u00fcren bir d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc.<\/p>\njest.config.js<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong>
\n Projenizin k\u00f6k dizininde jest.config.js<\/code> ad\u0131nda bir dosya olu\u015fturarak Jest’i Vue.js ile \u00e7al\u0131\u015facak \u015fekilde yap\u0131land\u0131rman\u0131z gerekir.<\/p>\nmodule.exports = {\n moduleFileExtensions: [\n 'js',\n 'json',\n 'vue'\n ],\n transform: {\n '^.+\\\\.vue$': 'vue-jest',\n '^.+\\\\.js$': 'babel-jest'\n },\n moduleNameMapper: {\n '^@\/(.*)$': '.vue<\/code> dosyalar\u0131n\u0131 vue-jest<\/code> ile, .js<\/code> dosyalar\u0131n\u0131 ise babel-jest<\/code> ile d\u00f6n\u00fc\u015ft\u00fcrmesini, @<\/code> alias’\u0131n\u0131 tan\u0131mas\u0131n\u0131 ve test kapsam\u0131n\u0131 toplamas\u0131n\u0131 sa\u011flar.<\/p>\nbabel.config.js<\/code> Dosyas\u0131 Olu\u015fturma (Gerekliyse):<\/strong>
\n E\u011fer projenizde hen\u00fcz bir Babel yap\u0131land\u0131rmas\u0131 yoksa, Vue CLI’\u0131n varsay\u0131lan yap\u0131land\u0131rmas\u0131na benzer \u015fekilde bir babel.config.js<\/code> dosyas\u0131 olu\u015fturman\u0131z gerekebilir.<\/p>\nmodule.exports = {\n presets: [\n ['@babel\/preset-env', { targets: { node: 'current' } }]\n ]\n };<\/code><\/pre>\nBirim Testleri: Vue Bile\u015fenlerini Test Etmek<\/h3>\n
Temel Bile\u015fen Testi<\/h4>\n
mount<\/code> ve shallowMount<\/code> olmak \u00fczere iki ana metot sunar.<\/p>\nmount<\/code>:<\/strong> Bile\u015feni ve t\u00fcm alt bile\u015fenlerini tam olarak render eder. Bu, entegrasyon testleri i\u00e7in daha uygun olabilir, ancak birim testlerinde alt bile\u015fenlerin davran\u0131\u015f\u0131n\u0131 izole etmek istiyorsan\u0131z karma\u015f\u0131kl\u0131\u011f\u0131 art\u0131rabilir.
\n* shallowMount<\/code>:<\/strong> Bile\u015feni render eder, ancak alt bile\u015fenlerini “stub” (sahte) olarak render eder. Yani, alt bile\u015fenlerin sadece etiket isimleri g\u00f6r\u00fcn\u00fcr, i\u00e7 mant\u0131klar\u0131 \u00e7al\u0131\u015fmaz. Bu, birim testleri i\u00e7in idealdir \u00e7\u00fcnk\u00fc test edilen bile\u015fenin kendi mant\u0131\u011f\u0131na odaklanman\u0131z\u0131 sa\u011flar ve alt bile\u015fenlerden kaynaklanabilecek yan etkileri ortadan kald\u0131r\u0131r.<\/p>\nGreeting<\/code> bile\u015feni, bir name<\/code> prop’u al\u0131r ve bir mesaj g\u00f6r\u00fcnt\u00fcler.<\/p>\n\n\n