Vue.js, Vuetify, Typescript ve Jest ile unit test yazmak

Vue.js, Vuetify, Typescript ve Jest ile unit test yazmak

Writing unit test with Vue.js, Vuetify, Typescript and Jest


Geliştirmekte olduğumuz proje kapsamında Vue.js, Vuetify ve Typescript ile çalışmaktayız. Burada unit test yazmak istediğimizde biraz araştırma yapmak, ve çıkan problemlerle boğuşmak zorunda kaldık. Bu yazıda bulduğumuz çözümler ile konuyu anlatmak istiyorum :
Öncelikle unit test aracı olarak jest kullanmaya karar verdik. Vue.js Cli tarafından öncelik Mocka'ya verilmiş olsada bizim projemizde onu açlıştırmak hiç kolay olmadı. Sıkıntı typescript kullanmamızdan kaynaklanmakta. bu iş için kullanacağımız araçların hepsi typescript destekli değil maalesef. Gelelim adımlara :
1. npm ile bazı paketleri projemize eklememiz lazım :
npm i -D jest@23.6.0 jsdom@13.2.0 jsdom-global@3.0.2 ts-jest@23.10.5 @vue/test-utils @vue/cli-plugin-unit-jest @vue/cli-plugin-typescript

Burada önemli nokta jest sürümünün 23'de kalması. Çünkü ts-jest şu anda (11.02.2019 itibari ile) sadece jest'in 23. versiyonuna kadar destek vermekte. jest'i 24. versiyona geçirirseniz bir sürü problem ve uyumsuzluk çıkmakta. 

Ayrıca  jest'i direk çağırabilmek için aşağıdaki komutu'da çalıştırmamız gerekiyor :
npm i -g jest

2. Projenizin root dizininde jest.config.js isimli bir dosya oluşturuyoruz ve aşağıdaki gibi içini dolduruyoruz: 

const { defaults } = require('jest-config');
// jest.config.js
 
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: { '^@/(.*)$''<rootDir>/src/$1' },
  moduleFileExtensions: [
    ...defaults.moduleFileExtensions,
    // tell Jest to handle `*.vue` files
    "vue",
    'ts',
    'tsx'
  ],
  transform: {
    // process `*.vue` files with `vue-jest`
    '^.+\\.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: [
    '**/tests/unit/**/*.(spec|test).(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  globals: {
    window: {
      navigator: {
        userAgent: 'node'
      }
    },
 
    navigator: {
      userAgent: 'node'
    }
  },
 
  setupTestFrameworkScriptFile: "<rootDir>/tests/jest-setup.ts",
  collectCoverage: true
};

 collectCoverage ile projemizin coverage'ını görmemiz sağlanmış olmakta. 
Testlerimizin, projenin root dizininin altındaki tests isimli dizinde yer alacağını söylemekteyiz. Ben biraz düzen manyağı olduğum için alt dizinlerle çalışabilmek içinde /**/ şeklindeki path yazımını kullanıyorum. Böylece tests altındaki bütün alt dizinlerde taranıyor. Ayrıca test olarak sistem sadece .test.ts , .spec.ts , .test.js , .spec.js uzantılarını kabul etmekte. tsx ve jsx de var ama biz bunları kullanmadığımız için pas geçtim. 

3. tests dizininin içinde jest-setup.ts dosyasını oluşturuyoruz. Bu dosya test sisteminin genel bir setup dosyası olup, ilk çalıştırılan dosya olmakta. 

//  package.json has a section that instructs jest to
//  read this setup/startup file.

// jsdom 'u testler için register ediyoruz.
import jsdomGlobal from 'jsdom-global';
jsdomGlobal();
 
// Vue kullanmak yerine localVue kullandığımız için bu kısmı yorum haline getirdim. 
import Vue from 'vue';
 
// //  DON'T DO THIS or you'll have problems like <v-btn :to="..."> rendering
// //  as <router-link> instead of <a href="..."> on the unit tests.
// //  See tests/Foo.spec.js to learn how to use Vuetify in the unit tests.
// // import Vuetify from 'vuetify';
// // Vue.use(Vuetify); // NO, DON'T DO THIS.

// //  You may not need this. Uncomment only if you see some sort of
// //  regeneratorRuntime error.
// // import 'babel-polyfill';

//  So we don't see unnecessary Vue warnings about production.
Vue.config.productionTip = false;


Gördüğünüz gibi Vue'de burada register olmakta. 


4. Sonrada isteğinize göre test dosyalarınızı oluşturabiliyorsunuz:

import { shallowMount } from '@vue/test-utils';
import CustomCommandColumn from '../../../../../src/components/data-table/components/columns/custom-command-column.vue';
import Vuetify from 'vuetify';
import Vue from 'vue';
 
describe('custom-command-column-without-tooltip', () => {
  Vue.use(Vuetify);
 
  const c = shallowMount(CustomCommandColumn, {
    propsData:
    {
      row: {},
      custom: {
        key: 'cc1',
        icon: 'fa-ink',
      },
    },
  });
 
  it('Simple use without tooltip', () => {
    const vm: any = c.vm;
    expect(vm.isVisible).toBe(true);
    expect(vm.custom.icon).toBe('fa-ink');
    // console.log(c.element.outerHTML);
    expect(c.find('v-icon-stub').exists()).toBe(true);
    expect(c.find('v-tooltip-stub').exists()).toBe(false);
  });
});

5. Test'leri çalıştırmak için command prompt veya terminal'de jest yazmanız yeterli olacaktır. Ancak npm ile çalıştığımız için package.json içerisine bir scripts ekleyerek bu işin npm'de yapılmasını da sağlıyoruz. 


    "test": "jest",

bunun kullanımı ise
npm t
komutu ile olmakta :




Yorumlar

Popüler Yayınlar