Ana içeriğe atla

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

Bu blogdaki popüler yayınlar

Babamın durumu

Babam Mart 2017 de zatüreden hastanede yatmıştı. Bu sırada ciğerlerde bir kanser görülmüş. Bu kanserin ne olduğu ile ilgili tetkikler de başlamış. Zatüreden sonra hemen kanser ile ilgili işlemlere yoğunlaşıldı. Kalçada görülen bir kitle vardı. Ona da baktılar ama temiz çıktı. Kanser tedavisi olan kemoterapi hemen başladı. 14 haziranda ilk kemoterapi dozunu aldı. İlk günler iyiydi. 19 hazirandan itibaren durumu kötülemeye başlamış. En son 21 Haziran gecesi çok kötü olunca önce Torbalı Devlet Hastanesine götürüldü. Burada vücudundaki sodyum'un çok azalmış olmasından dolayı hemen sodyum takviyesi yapıldı. Sodyum takviyesi ancak bir oranda etkili olduktan sonra yine kötü duruma geri dönüş yapmış. Bu yüzden Bozyaka araştırma hastanesine sevkedildi. Bozyaka da önce dahiliye yoğun bakıma alındı. Ancak burada bir süre kalbi durmuş ve kalp masajı ile geri getirmişler. Sonrada genel yoğun bakıma aldılar.
Şu an yoğun bakımda hipotermi durumunda tutuluyor. Bu uygulanan tedavilerden biri. Diğer…

Azure Cosmos DB Emulator Çalışmıyor.

Merhaba, Bugün Azure Cosmos DB'ye bir göz attım. Kullanımını anlamak için kendi bilgisayarımıza bir emulator(Azure Cosmos DB Emulator) kurabiliyoruz. Bunu kurup çalıştırdığımda DocumentDB.StartupEntryPoint.exe'nin hata verdiğini gördüm. Hatanın detayını eventviewer'dan şöyle gördüm:

Git'te GitCredentialWinStore ile ilgili alınan hatanın çözümü

Git kurulumundan sonra remote(sunucu) ile ilgili işlemler yaptığınızda session açık olsada tekrar tekrar kullanıcı adı ve şifre soruyor ve mesaj ekranında aşağıdaki gibi bir hata alıyorsanız:
"C:\Program Files (x86)\GitExtensions\GitCredentialWinStore\git-credential-winstore.exe" erase: C:\Program Files (x86)\GitExtensions\GitCredentialWinStore\git-credential-winstore.exe: No such file or directory bu durumda  git'in şifre saklama sisteminde bir problem oluştuğunu görmekteyiz. Bunun çözümü olarak öncelikle https://github.com/Microsoft/Git-Credential-Manager-for-Windows adresinden Windows için git şifre yönetim aracını indirmeniz ve kurmanız gerekiyor. Dosyanın tam indirme linki :
https://github.com/Microsoft/Git-Credential-Manager-for-Windows/releases
şeklindedir. Güncel versiyonu buradan indirip kurduktan sonra GIT BASH ile 2 satırlık bir işlem yapmamız gerekiyor.

1. öncelikle git'in geçerli şifre yöneticisini siliyoruz :

git config --global --unset credential.helper