VueJS’te Unit Test nedir, nasıl yazılır?

Unit Test her yazılımcının özellikle mülakatlarda ve mülakatlara hazırlık sürecinde, gündemini meşgul eden önemli bir konu. Frontend geliştirirken de Unit Test’ler yazmak kod kalitesini artırıyor. Doğrudan development ve test sürecindeki bazı adımları otomatikleştiriyor. Peki VueJS özelinde Unit Test’ler nasıl yazılıyor, gelin inceleyelim.

Unit Test nedir?

“Birim testi” olarak da ifade edilen Unit Test, kodun belirli bir birimini (genellikle bir fonksiyon veya metod) test etmek için yazılan otomatik testlerdir. Bu testler, yazılan kodun beklenen şekilde çalışıp çalışmadığını doğrulamak için kullanılır.

Birim testleri genellikle yazılımın farklı bileşenlerini önce izole eder sonra test eder. Bu şöyle de açıklanabilir, birim testleri bir kod parçasını test ederken, bu kod parçası dışındaki diğer bileşenlerin etkileri büyük ölçüde göz ardı edilir. Bu sayede parçaların ayrı ayrı test edilebilir olduğu teyit edilir, kodun daha temiz, güvenilir ve bakımı daha kolay olup olmadığı anlaşılır.

Nasıl yazılır?

Basit bir Counter App yazalım.

src altında components klasörü oluşturalım, içerisinde counter klasörü oluşturalım ve bu klasör içerisinde de Counter.vue adında HTML elementlerimizin bulunacağı dosya oluşturalım.

<script setup>
import useCounter from './useCounter'
const { count, increment, decrement } = useCounter()
</script>

<template>
  <h1>Counter</h1>
  <h2 class="count">{{ count }}</h2>
  <section class="actions">
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </section>
</template>

<style scoped>
.actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
</style>

Ardından aynı klasör içerisinde Counter’ımızın fonksiyonlarının bulunacağı useCounter.js dosyasını oluşturalım.

import { ref } from 'vue'

const useCounter = () => {
  const count = ref(0)

  const increment = () => count.value++

  const decrement = () => count.value--

  return {
    count,
    increment,
    decrement,
  }
}

export default useCounter

Ne güzel tertemiz bir component’imiz oldu. Fonksiyonları ayrı bir dosyada yazıp .vue dosyasında yalnızca implementasyon işlemini yaptık. Böylece HTML veya CSS ile ilgili bir bakım, düzenleme yapmamız gerektiğinde hangi dosyaya bakacağımızı biliyoruz. Fonksiyonlarla ilgili bir sorun yaşadığımızda da doğrudan useCounter.js dosyasına bakacağımızı biliyoruz.

Test Framework’ü nasıl kurulur?

Unit test yazabilmek için ihtiyacımız olan bağımlılığı (dependency) kuralım. Söz konusu test framework’ümüz vitest (https://vitest.dev)

Dokümanda ifade edildiği üzere npm install -D vitest komutuyla kurulumu yapalım.

Ardından counter adlı klasörümüz içerisinde counter.test.js adında bir dosya oluşturalım.

import { expect, test } from 'vitest'
import useCounter from './useCounter'
const { count, increment, decrement } = useCounter()

test('counter', () => {
  expect(count.value).toBe(0)

  increment()

  expect(count.value).toBe(1)

  decrement()

  expect(count.value).toBe(0)
})

Hepsi bu kadar, artık bu component’te yaptığımız değişiklikler bu .test.js dosyasının kontrolünden geçecek ve eğer yaptığımız değişikliklerle akışı, yapıyı bozduysak bizi terminalde uyaracak.

Bu uyarıları görebilmek için package.json dosyası içerisindeki scripts’lerin içerisine test: vitest komutunu ekleyelim.

Bu sayede npm run test komutunu kullanabileceğiz, bu komutla test’lerimizin çalışmasını (run olmasını) sağlayabileceğiz.

Testimizi test edelim

Hadi expect(count.value).toBe(0) ifadesinin ne anlama geldiğini anlayarak başlayalım.

Bu ifadeyi Türkçe’ye şöyle çevirebiliriz, count değerinin 0 olmasını bekliyoruz. Eğer gerçekleşirse test başarılı.

Sonrasında increment() fonksiyonumuzu çağırıyoruz ki count değeri +1 olsun.

Bundan sonra ise yine beklentimiz karşılandı mı diye test etmemiz gerekiyor.

expect(count.value).toBe(1)

Burada da anlayacağınız üzere count bilgisinin mevcut değerinin 1 olup olmadığını kontrol ediyoruz. Olduysa testimiz başarılı (passed) olarak kaydediliyor.

Unit Test’in işlevi

Tüm fonksiyonlarımızı test eden kodlar yazarsak hatta fonksiyonu henüz yazmadan onu test edecek kodları yazarsak kodun standartlarını ortaya koymuş oluruz. Böylece projede görevli diğer developer’lar veya ileride başka bir kafayla kodda düzenleme yapan kendimiz istesek de yapısal sorunlar oluşturamayız. Yani test yazmak bir tür anayasa yazmaktır. Developer test yazarak özgürlüklerini tanımlar, yapabileceklerinin çerçevesini çizer. Böylece hareket kabiliyetini kötüye kullanamaz.

Unit Test’i verimli kullanmak için mutlaka pipeline sürecinde test’lerin run edilmesi ve tamamının passed geçer notu almasını sağlamak gerekir. Bu notu alamıyorsak projenin deploy olmasını da engellemeliyiz.

Böylece “anayasa” dokunulmaz kalmaya devam ederek developer’ı kaliteli kod yazmaya zorlar.

GitHub: https://github.com/gayret/unit-test-on-vuejs