집 > 기사 > 웹 프론트엔드 > vue-cli 단위 테스트 분석 예시

vue-cli 단위 테스트 분석 예시

不言원래의: 2018-07-20 10:50:341783검색

이 기사에서는 vue-cli의 단위 테스트에 대한 예제 분석을 소개합니다. 필요한 경우 이를 참조할 수 있습니다.

vue-cli의 단위 테스트

최근 프로젝트 개발이 막바지에 이르렀는데, 이전 작업의 단점을 반성하고 테스트 방법을 도입해야 한다고 생각해서 프론트엔드 테스트 등 문서 공부를 시작했습니다. 프로젝트가 vue-cli 한 페이지를 기반으로 하고 있기 때문에 이를 기반으로 확장하고 싶습니다.

테스트 프레임워크 유형

vue는 jest, mocha 등과 같은 여러 테스트 프레임워크를 공식적으로 제공합니다. 이 사례에서는 이를 구현하기 위해 karma + mocha + chai 패키지를 사용합니다. 또한 공식 테스트 라이브러리 vue-test-utils와도 결합됩니다. 특별 참고 사항, vue-cli 설치 시 테스트 유형 선택 시 위아래 키를 사용하여 해당 테스트 프레임워크를 선택하세요

특정 사례 설명

정적 파일 로딩 테스트

import Vue from 'vue'
import Test from '@/components/Test'
import {mount} from 'vue-test-utils'

describe('Test.vue',()=>{
    it('页面加载成功',()=>{
        const wrapper = mount(Test);
        expect(wrapper.find('h1').text()).to.equal('My First UnitTest');
    })
})

테스트할 파일 소개 및 홈페이지의 vue - test-utils에서 제공하는 mount 메소드를 사용하여 페이지를 마운트하고 페이지의 Dom 요소를 쉽게 얻을 수 있습니다. 설명은 mocha의 구문이며 각각 두 개의 매개변수를 받습니다. 전자는 테스트할 페이지이고 후자는 테스트 시 프롬프트이며 둘 다 함수를 허용합니다. 그 안에 있는 함수는 원하는 결과, 즉 Expect()의 내용이 결과와 같은지 여부를 확인하는 것입니다. 당신이 원하는.

이벤트 작업 테스트

import Vue from "vue"
import Event from '@/components/Event'
import { mount } from 'vue-test-utils'

describe('Event.vue',()=>{
    it('事件方法测试',()=>{
        const wrapper = mount(Event);
        const clickButton = wrapper.find('button');
        clickButton.trigger('click');
        const number = Number(wrapper.find('input').element.value);
        expect(number).to.equal(2);
    })
})

전체 형식은 유사하며 주로 vue-test-utils의 트리거 메서드를 사용하여 클릭 작업을 시뮬레이션합니다.

비동기 작업 테스트

import Vue from 'vue'
import {mount,shallow} from 'vue-test-utils'
import AsyncEvent from '@/components/AsyncEvent'

describe('AsyncEvent.vue',()=>{
    it('异步行为测试',(done)=>{
        const wrapper = mount(AsyncEvent);
        wrapper.find('button').trigger('click');
        setTimeout(()=> {
            expect( Number(wrapper.find('span').text()) ).to.equal(2);
            done();
        }, 1000)
    })
})

SetTimeout은 여기서 비동기 테스트에 사용됩니다. done 이 메소드는 테스트 실행이 언제 종료되는지 결정하는 데 사용됩니다.

VUEX 테스트

import { shallow, createLocalVue } from 'vue-test-utils'
import Vuex from 'vuex'
import VuexTest from '@/components/VuexTest'
import myModule from '@/store/index'

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

describe('VuexTest.vue',()=>{
    let getters = myModule.getters;
    let state;
    let store;
    let mutations;

    beforeEach(()=>{
        state = {
            count: 0
        }
        mutations = {
            increment(state) {
                state.count++;
            }
        }
        store = new Vuex.Store({
              modules: {
                state,
                mutations,
                getters,                
              }
        })
    })

    it('Vuex 渲染监测',()=>{
        const wrapper = shallow(VuexTest,{store,localVue});
        const span = wrapper.find('span');
        expect( Number(span.text()) ).to.equal(state.count)
    })

    it('Vuex 事件监测',()=>{
           mutations.increment(state)
          expect(state.count).to.equal(1);
    })
})

물론 vue를 사용할 때 vuex 테스트도 고려해야 합니다. Vue 환경에 영향을 주지 않기 위해 로컬 및 독립적으로 작동하는 vue 환경은 마운트되고 렌더링된 Vue 구성 요소를 포함하는 래퍼를 생성합니다. 그러나 차이점은 기본적으로 마운트와 동일합니다. , 공식 데모에서는shallowmount를 사용하지만 실제 테스트에서는 오류가 보고됩니다. 그런 다음 테스트에서 Vuex Store Warehouse를 구축해야 합니다. 프로젝트의 저장소도 여기에 소개되고 해당 getter가 테스트의 getter에 할당됩니다. 이렇게 하면 어설션의 결과가 프로젝트에 설정된 것과 같습니다.

결론

결국 유닛 테스트를 작성하는 것이 처음이라 잘 아는 바가 없습니다. 특별히 관심 있는 학생들은 위의 테스트 프레임워크와 문서를 잘 살펴보시기 바랍니다. 이 도서관은 풍부합니다.

vue-cli 단위 테스트 분석 예시

vue-cli의 단위 테스트

테스트 프레임워크 유형

특정 사례 설명

결론

관련 기사