Vue.js Unit Test için mount ve shallowMount farkı

Vue.js Unit Test için mount ve shallowMount farkı

mount and shallowMount difference for Vue.js Unit Test

Vue.js ile unit test yazmak istediğinizde karşımıza 2 yardımcı(helper) metod çıkıyor. Bunlardan ilki mount  : Bu metod komponent'imizin test edebileceğimiz bir örneğini sağlarken, bu komponent'in içindeki bütün alt komponent'leri de oluşturmaktadir. Yani iç içe kullandığımız bütün komponent'lerimiz oluşturulup kullanıma sunulmaktadır. mount ile dökümandaki bir örneği aşağıda görebilirsiniz :

When you want to write a unit test with Vue.js, we can use 2 helper methods. The first of these is "mount": While this method provides an instance of our component that we can test, it also creates all the sub-components inside this component. In other words, all components that we use nested are created and made available. Here is an example of the document with mount:

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

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo);
    expect(wrapper.contains('div')).toBe(true);
  });
}); 

Burada Foo ismindeki komponent'imiz içindeki bütün alt komponent'lerle beraber oluşturulup kullanıma sunulur. Büyük bir iş sürecini test etmek istediğimizde kullanabileceğimiz bir yöntem.

Here, the component called Foo is created with all sub components in it. A method we can use when we want to test a large business process.

shallowMount : Bu metod mount metoduna çok benzemekle beraber, farklı olarak, sadece çalışılan komponent'i oluşturup, alt komponent'leri "-stub" son eki ile isimlendirip aynı bırakır. Örnek olarak kendi kodumdan şöyle bir örnek verebilirim :

shallowMount: This method is very similar to the mount method. Unlike, this method generates only the main component. This method changes names the sub-components with the suffix "-stub". But this method does not create an instance for sub components. For example, let me share a part of my own code:

<template>
  <div v-if="isVisible">
    &nbsp;
    <v-tooltip top v-if="!!custom.tooltip">
      <v-icon slot="activator" @click.stop="customClicked">{{ custom.icon }}</v-icon>
      <span>{{ custom.tooltip | translate }}</span>
    </v-tooltip>
    <v-icon v-else @click.stop="customClicked">{{ custom.icon }}</v-icon>
  </div>
</template>
<script lang="ts">

Burada vuetify ile geliştirdiğim bir komponent görünmektedir. Bu komponent'i shallowMount ile oluşturduğumuzda şöyle bir sonuç alıyoruz :

Here I see a component I developed with vuetify. When we create this component with shallowMount, we get a result:

<div>
    &nbsp;
    <v-tooltip-stub opendelay="200" 

                    closedelay="200" 

                    contentclass="" 

                    fixed="true" 

                    top="true" 

                    maxwidth="auto" 

                    nudgebottom="0" 

                    nudgeleft="0" 

                    nudgeright="0" 

                    nudgetop="0" 

                    nudgewidth="0" 

                    debounce="0" 

                    tag="span">
        <v-icon-stub>

            fa-ink

        </v-icon-stub>

        <span>Deneme</span>

    </v-tooltip-stub>
</div>

Dikkat edebileceğiniz gibi, v-tooltip komponent'i v-tooltip-stub olarak, v-icon komponent'i de v-icon-stub olarak aynen korunmuş durumdadır. mount metodunu kullanmış olsaydık, bu komponentlerin de render edilmiş hallerini çıktıda görecektik.

As you may notice, the v-tooltip component is v-tooltip-stub, and the v-icon component is protected as v-icon-stub. If we had used the mount method, we would see the rendered version of these components in the output.