Exemple d'analyse des tests unitaires de vue-cli

Cet article vous présente un exemple d'analyse de tests unitaires de vue-cli. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tests unitaires de vue-cli

Récemment, le développement du projet touche à sa fin. J'ai réfléchi aux lacunes des travaux précédents et j'ai pensé que des méthodes de test devraient être introduites, alors j'ai commencé. pour apprendre les tests front-end et autres documents. Parce que le projet est une seule page basée sur vue-cli, je souhaite développer sur cette base.

Type de framework de test

vue fournit officiellement plusieurs frameworks de test tels que jest, mocha, etc. Ce cas utilise le package karma + mocha + chai pour l'implémenter. Et il est également combiné avec la bibliothèque de test officielle vue-test-utils. Note spéciale, lors de la sélection du type de test lors de l'installation de vue-cli, utilisez les touches haut et bas pour sélectionner le framework de test correspondant

Description spécifique du cas

Test de chargement de fichier statique

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

La page d'accueil présente le fichier à tester et la méthode de montage fournie par vue-test-utils En montant la page via cette méthode, vous pouvez facilement obtenir le. Élément Dom de la page. décrire et c'est la syntaxe de moka, et chacun accepte deux paramètres. La première est la page à tester, la seconde est l'invite lors du test, et les deux acceptent une fonction. La fonction qu'elle contient consiste à affirmer le résultat souhaité, c'est-à-dire si le contenu de expect() est égal au résultat. tu veux. .

Test de fonctionnement d'événement

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

Le format global est similaire, utilisant principalement la méthode de déclenchement de vue-test-utils pour simuler les opérations de clic

Test de fonctionnement asynchrone

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 est utilisé ici pour les tests asynchrones. Notez que la méthode done est utilisée ici pour déterminer quand l'exécution du test se termine

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

Bien sûr, lorsque vous utilisez vue, vous devez également considérer le test de vuex. Il s'agit d'utiliser la méthode createLocalVue pour construire un environnement vue local et indépendant afin d'éviter d'affecter l'environnement Vue global, et Shallow crée une Vue qui contient des éléments montés. et rendu Le Wrapper du composant est différent dans la mesure où le sous-composant est tronqué, ce qui est fondamentalement le même que mount. Cependant, la démo officielle utilise un montage superficiel, mais dans le test réel, une erreur est signalée, puis elle est remplacée. avec peu profond. Ensuite, un entrepôt de magasin vuex doit être construit dans le test. Le magasin dans le projet est également introduit et ses getters sont attribués aux getters dans le test. Cela garantit que le résultat de l'assertion est celui défini dans notre projet.

Remarques finales

Après tout, c'est la première fois que j'écris un test unitaire, et je n'en sais pas grand-chose. Les étudiants particulièrement intéressés peuvent y jeter un bon coup d'œil. ci-dessus cadre de test et documents. Ces bibliothèques L'API est riche.

Recommandations associées :

Analyse de la liaison de classe et de style et du rendu conditionnel et de liste dans Vue

Méthodes Javascript et jQuery pour obtenir des objets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!