Как выполнить модульное тестирование метода в компоненте Vue.js с помощью jest - PullRequest
Новая
       61

Как выполнить модульное тестирование метода в компоненте Vue.js с помощью jest

0 голосов
/ 07 декабря 2018

Суть этой проблемы для меня заключалась в доступе к методу, который находится внутри самого компонента.Вопрос здесь не описывает, как получить доступ к методу внутри компонента.

У меня есть компонент Vue: 

file name: ThisVueFile.test.js
<template>
    <div id="ThisStuff">
        <span>
            Some other stuff is going on here
        </span>
    </div>
</template>

<script>
    import foo from 'bar'

    export default {
        props: {
            ObjectWithStuffInIt: [
                {
                    id: 1
                    bar: false
                },
                {
                    id: 2
                    bar: false
                },
            ]
        },
        data: {
            foo: "foo"
        },
        methods: {
            doSomeWork: function() {
                for (var i = 0; i < ObjectWithStuffInIt.length; i++) { 
                    if (foo === "diddly") {
                        ObjectWithStuffInIt[i].bar = true;
                    }
                }
            }
        }
    }
</script>

Мне нужно проверить doSomeWork в модульном тесте.Я просто не могу понять, как получить доступ к этому методу.

Пока что я дошел до этого: 

import {createLocalVue, shallow} from 'vue-test-utils'
import ThisVueFile.test.js from '../../thisPlace/ThatPlace/ThisVueFile.vue'
import Vuex from 'vuex'

const localVue = createLocalVue()
localVue.use(Vuex);

describe('ThisVueFile.test.js', () => {
    let user;
    let store;

    beforeEach(() => {
        let getters = {
            user: () => user
        }

        store = new Vuex.Store({ getters })
    })

    // I need to fill propsData: with some local data here 
    //     because it is server data
    // I need to have access to the method
    // I need to use local data for `foo` in the test. 

    it(' When foo is set to -diddly- then set bar to true ', () => {
        foo = "diddly";
        // run the method in the component here 
        doSomeWork();

        expect(OjbectWithStuffInIt[0].bar.equals(true));
    })
})

1 Ответ

0 голосов
/ 07 декабря 2018

Настройка propsData

Когда вы создаете обертку для компонента с shallowMount (или mount), вы можете передать options с начальнымpropsData: 

import MyComponent from "@/components/MyComponent";

//...

it('...', () => {
  const wrapper = shallowMount(MyComponent, {
    localVue,
    propsData: {
      ObjectWithStuffInIt
    }
  });
})

Вызов метода компонента

Оболочка обеспечивает доступ к экземпляру компонента через его свойство vm, поэтому вы можете вызвать метод напрямуюс помощью: 

wrapper.vm.doSomeWork()

Изменение свойства данных компонента

Аналогично, вы можете напрямую получить доступ к свойствам данных компонента: 

wrapper.vm.foo = 'diddly'

В целом ваш тест может выглядеть примерно так: 

import { createLocalVue, shallowMount } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent";

describe("MyComponent", () => {
  it(" When foo is set to -diddly- then set bar to true ", () => {
    const ObjectWithStuffInIt = [
      { id: 200, bar: false },
      { id: 300, bar: false }
    ];
    const localVue = createLocalVue();
    const wrapper = shallowMount(MyComponent, {
      localVue,
      propsData: {
        ObjectWithStuffInIt
      }
    });
    wrapper.vm.foo = "diddly";
    // run the method in the component here
    wrapper.vm.doSomeWork();

    expect(ObjectWithStuffInIt[0].bar).toBe(true);
  });
});

демо

...