Vue.js Bileşenlerini(Components) Jest ile Birim(Unit) Testinin Yapılması

Daha önceki makalemde sizlere JavaScript’in test kütüphanesi olan Jest Birim(Unit) testinden bahsetmiştim. Eğer Jest ile ilgili bir fikriniz yoksa önceki makalemi okumanızı tavsiye ederim.

Jest Nedir?

Şimdi makalemize gelecek olursak, bu makalemi daha çok bir uygulama üzerinden anlatmak istiyorum. Öncelikle şunu belirtmek isterim ki eğer TDD(Test Driven Development) yapmak istiyorsanız öncelikle Jest kodunu yazmanız gerekmektedir. Lafı daha çok uzatmadan hemen uygulamamıza geçelim.

VueJs projemizi oluşturduktan sonra terminal ekranına gelip;
npm install — save-dev vue-jest jest @vue/test-utils @vue/cli-plugin-unit-jest diyerek projemize Jest’i dahil ediyoruz.

Paketi indirdikten sonra projemize jest.config.js adında bir dosya oluşturuyoruz ve içine aşağıda ki kodu alıp yapıştırıyoruz. Unutmayın ki bu kod .spec.js uzantıları için çalışmaktadır.

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue',
      'ts',
      'tsx'
    ],
    transform: {
      '^.+\\.vue$': 'vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      "\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
        "**/components/**/mdbutton.spec.{j,t}s?(x)"
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ],
    globals: {
      'js-jest': {
        babelConfig: true
      }
    }
  }

Eğer .spec.ts uzantılı bir dosyayı çalıştırmak istiyorsanız;

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue',
      'ts',
      'tsx'
    ],
    transform: {
      '^.+\\.vue$': 'vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      '^.+\\.tsx?$': 'ts-jest'
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
        "**/components/**/scrollslider.spec.{j,t}s?(x)"
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ],
    globals: {
      'ts-jest': {
        babelConfig: true
      }
    }
  }

İkisini arasında ki fark transform objesinin içine bakarsanız eğer görebilirsiniz.

Burada en önemli özellik testMatch’dır. Çünkü .spec.js veya .spec.ts test dosyalarının hangisinin çalıştırılacağının belirlendiği kod kısmıdır.

Şimdi gelelim VueJs de hazırladığımız bileşene(component).

MdButton.vue

Yukarıdaki fotoğraf da görüldüğü üzere button bileşenine customClass ve size adında iki adet props geçilmiştir.

Gelim Jest Birim(Unit) test kodlarımıza;

mdbutton.spec.js

Yukarıda görüldüğü üzere wrapper.classes().toContain() kodunu açacak olursam hedef class’a props geçildikten sonra .toContain() ile o class’ı içerip içermediğinin kontrolü yapılıyor. Jest’in kendi sitesine bakarsanız eğer .toContain() gibi bir çok özelliği bulup projeleriniz de kullanabilirsiniz.(https://jestjs.io/docs/en/expect)

Gerekli test kodlarını yazdıktan sonra package.json dosyamıza gelip “scripts” objesinin içine “test”:”jest” yazıyoruz.Bu kod terminale npm run test yazdığımızda jesti devreye sokacak olan koddur.

"scripts": {
    "test": "jest",
  }

Artık VueJs de yazdığımız kodları, bileşenleri Jest kullanarak birim testini gerçekleştirebiliriz. O halde terminalimize gelip npm run test yazalım ve sonuca hep beraber bakalım.

terminal çıktısı

Projeyi GitHub hesabımda bulabilirsiniz.

GitHub: https://github.com/mrtdmrmrt/Medium-VueJs-Jest-Testing