Example analysis of unit testing of vue-cli

This article introduces to you an example analysis of unit testing of vue-cli. It has certain reference value. Friends in need can refer to it.

Unit testing of vue-cli

Recently, the project development is coming to an end. I reflected on the shortcomings of the previous work and thought that testing methods should be introduced, so I started to learn front-end testing and the like. document. Because the project is a single page based on vue-cli, I want to expand on this basis.

Test framework type

vue officially provides several test frameworks such as jest, mocha, etc. This case uses the karma mocha chai package to implement it. And it is also combined with the official testing library vue-test-utils. Special instructions, when selecting the test type when installing vue-cli, use the up and down keys to select the corresponding test framework

Specific case description

Static file loading test

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

The home page introduces the file to be tested and the mount method provided by vue-test-utils. By mounting the page through this method, you can easily obtain the Dom element of the page. describe and it are the syntax of mocha, and each accepts two parameters. The former is the page to be tested, the latter is the prompt when testing, and both accept a function. The function in it is to assert the result you want, that is, whether the content of expect() is equal to the result you want. .

Event operation test

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

The overall format is similar, mainly using the trigger method of vue-test-utils to simulate click operations

Asynchronous operation test

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 is used here for asynchronous testing. Note that done is used here to determine when the test execution ends.

VUEX test

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

is using vue Of course, you must also consider the test of vuex. This is to use the createLocalVue method to construct a local and independent vue environment to avoid affecting the global Vue environment, while shallow creates a Wrapper that contains the mounted and rendered Vue components. Different What is stubbed is the subcomponent, which is basically the same as mount. However, the official demo uses shallowmount, but in the actual test, an error is reported, and then it is replaced with shallow. Then a vuex store warehouse must be built in the test. The store in the project is also introduced and its getters are assigned to the getters in the test. This ensures that the result of the assertion is what is set in our project.

Conclusion

After all, it is my first time to write a unit test, and I don’t know much about it. Students who are specifically interested can take a good look at the above-mentioned test framework and documents. These libraries The API is rich.

Related recommendations:

Analysis of class and style binding and conditional and list rendering in Vue

Javascript and jQuery Methods to obtain objects

The above is the detailed content of Example analysis of unit testing of vue-cli. For more information, please follow other related articles on the PHP Chinese website!