Fabrikod | Nuxt veya Vue Projelerinde Jest Test Kullanımı 1

Nuxt veya Vue projelerinde test işlemleri nasıl yapılır? Jest test Vue/Nuxt projelerinde nasıl kullanılır gibi soruların cevabını bu yazımda anlatacağım.

Test fonksiyonlarından bir kaçtanesini biliyor olmanız veya daha önce test yazmış olmanız buradaki mantığı daha kolay kavramanıza yardımcı olacaktır.

Öncelikle bir nuxt projesi oluşturalım. Oluştururken Nuxt’ un sorduğu sorular arasında hangi test aracını kullanmak istiyorsunuz diye soruyor. Biz burada Jest kütüphanesini seçebiliriz veya daha sonra projeye kendimiz ekleyebiliriz. Ben otomatik config dosyasının oluşması ve gerekli paketlerin indirilmesi için Jest’ i seçiyorum.

Şu anki Nuxt sürümünde otomatik olarak NuxtLogo.spec.js adında bir test dosyası oluşturuyor. Buraya sonuna test, spec yazarak oluşturduğunuz her js uzantılı dosya test dosyası olmuş oluyor. Bu oluşturulan dosyaları çalıştırmak için package.json dosyasında test adında bir field olması gerekir eğer Jest’ i başta seçtiyseniz otomatik oluşturulmuştur. Manuel kurulumda kendinizin eklemesi gerekir.

yarn test komutunu çalıştırdığınız da tüm test dosyaları ve içindeki testler çalışacaktır. Eğer vscode kullanıyorsanız orada Jest testleri için bir kaç araç bulunmakta ve kullanımlarıda çok basit yapıdadır isterseniz onları yükleyip kullanabilirsiniz.

İlk olarak Jest fonksiyonlarını öğrenelim.

mount: Belki en çok kullanacağımız fonksiyonlardan biridir @vue/test-utils kütüphnesine ait bir fonsiyondur. Componentlerin tanımlanan fonksiyonlarına değişkenlerine erişmek için kullanılan bir fonksiyondur. Parametre olarak component alır.

 import { mount } from '@vue/test-utils'

// Test componenti
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  // mount ile componenti tanımlamış olduk ve props olarakta msg’ ye değer 
  // atadık
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Hello world'
    }
  })

  // toContaine fonksiyonu ile parametre olarak girilen değer Hello world 
  //textini barındırıyor mu bunun kontrolü yapılıyor
  expect(wrapper.text()).toContain('Hello world')
})

shallowmount: mount fonksiyonu ile benzer özellikler taşır. Sadece componentin tüm özellik ve fonksiyonlarıyla birlikte render etmez. Bu componentin kullanım amacı yük alan komponentlerde ve yavaş çalışan testlerde daha performanslı olmasıdır ancak renderlamada bazı kısımları render yapmadığı için kullanılması pek önerilmez.

find: Mount fonksiyonuna bağlı bir zincir fonksiyondur. Component içerisindeki bir elementi seçmemizi sağlar.

trigger: elementin herhangi eventini tetiklemek için kullanılan bir fonksiyondur mount fonksiyonuna bağlıdır.

test('increments counter value on click', async () => {
  const wrapper = mount(Counter)
  const button = wrapper.find('button')
  const text = wrapper.find('p')

  expect(text.text()).toContain('Total clicks: 0')

  await button.trigger('click')

  expect(text.text()).toContain('Total clicks: 1')
})

$emit: adındanda anlaşılacağı üzere componentin tetiklenecek olan emitini tetikler.

import { mount } from '@vue/test-utils'
import ParentComponent from '@/components/ParentComponent'
import ChildComponent from '@/components/ChildComponent'

describe('ParentComponent', () => {
  it("displays 'Emitted!' when custom event is emitted", () => {
    const wrapper = mount(ParentComponent)
    wrapper.findComponent(ChildComponent).vm.$emit('custom')
    expect(wrapper.html()).toContain('Emitted!')
  })
})

SetData: componente reactive değişken tanımlar. Mount ile propsData şeklindede kullanılabilir.

SetProps: componentte props tanımlar.

test('should render Foo, then hide it', async () => {
  const wrapper = mount(Foo)
  expect(wrapper.text()).toMatch(/Foo/)

  await wrapper.setData({
    show: false
  })

  expect(wrapper.text()).not.toMatch(/Foo/)
})

Burada sadece props, data ve tetikleme işlemleriyle alakalı fonksiyonlar var. İkinci yazıda ise istek atma ve buna bağlı olan fonksiyonların kullanımlarını göreceğiz inşallah.