재스트를 사용하여 Vue.js 컴포넌트의 메서드를 유닛 테스트하는 방법

재스트를 사용하여 Vue.js 컴포넌트의 메서드를 유닛 테스트하는 방법

구성 요소 방법을 테스트하려고 합니다.여기서의 질문에서는 유닛 테스트에서 컴포넌트 방법에 액세스하는 방법은 설명되지 않습니다.

구체적으로는 아래의 Vue 컴포넌트를 사용하여doSomeWork()내 유닛 테스트에서?

Vue 컴포넌트:

<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>

테스트 코드:

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));
    })
})

호출 컴포넌트 메서드

래퍼는 해당 속성을 통해 컴포넌트인스턴스에 대한 액세스를 제공하기 때문에 다음과 같이 메서드를 직접 호출할 수 있습니다.

wrapper.vm.doSomeWork()

설정props

• 마운트 옵션(또는 로 전달)에는 컴포넌트의 초기화에 사용할 수 있는 속성이 포함됩니다.props설치 전.
• 컴포넌트가 이미 마운트된 후에 래퍼를 사용할 수도 있습니다.

예:

it('...', () => {
  const wrapper = shallowMount(MyComponent, {
    propsData: {
      myItems: [
        { id: 200, bar: false },
        { id: 300, bar: false }
      ]
    }
  });

  // OR
  wrapper.setProps({
    myItems: [
      { id: 400: bar: true }
    ]
  })
})

구성 요소 데이터 속성 수정

• 마운트 옵션에는 마운트 전에 구성 요소의 데이터를 초기화하는 데 사용할 수 있는 속성이 포함됩니다.
• 컴포넌트가 이미 마운트된 후에 래퍼를 사용할 수도 있습니다.
• 래퍼의 를 통해 구성 요소의 데이터 속성에 직접 액세스할 수 있습니다.vm소유물.

예:

it('...', () => {
  const wrapper = shallowMount(MyComponent, {
    data() {
      return {
        foo: 1
      }
    }
  });

  // OR
  wrapper.setData({ foo: 2 })

  // OR
  wrapper.vm.foo = 3
})

완전한 예

전체적으로 다음과 같은 테스트가 나타날 수 있습니다.

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

describe('MyComponent', () => {
  it('When foo is set to -something-, set bar to true', () => {
    const myItems = [
      { id: 200, bar: false },
      { id: 300, bar: false }
    ]
    const localVue = createLocalVue()
    const wrapper = shallowMount(MyComponent, {
      localVue,
      propsData: {
        myItems
      }
    })

    wrapper.vm.foo = 'something'
    wrapper.vm.doSomeWork()

    expect(myItems[0].bar).toBe(true)
  })
})

데모

언급URL : https://stackoverflow.com/questions/53660288/how-to-unit-test-a-method-in-a-vue-js-component-using-jest