Beispielanalyse des Unit-Tests von vue-cli

Dieser Artikel stellt Ihnen eine Beispielanalyse des Unit-Tests von vue-cli vor. Freunde in Not können sich darauf beziehen.

Unit-Test von vue-cli

Vor kurzem ging die Projektentwicklung zu Ende. Ich dachte über die Mängel der vorherigen Arbeit nach und dachte, dass Testmethoden eingeführt werden sollten, also begann ich um Front-End-Tests und ähnliches zu lernen. Da es sich bei dem Projekt um eine einzelne Seite handelt, die auf vue-cli basiert, möchte ich auf dieser Basis erweitern.

Test-Framework-Typ

vue stellt offiziell mehrere Test-Frameworks wie Jest, Mocha usw. bereit. In diesem Fall wird das Paket Karma + Mocha + Chai zur Implementierung verwendet. Und es ist auch mit der offiziellen Testbibliothek vue-test-utils kombiniert. Besonderer Hinweis: Verwenden Sie bei der Auswahl des Testtyps bei der Installation von vue-cli die Auf- und Ab-Tasten, um das entsprechende Test-Framework auszuwählen

Spezifische Fallbeschreibung

Test zum Laden statischer Dateien

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

Auf der Homepage werden die zu testende Datei und die von vue-test-utils bereitgestellte Mount-Methode vorgestellt. Durch das Mounten der Seite mit dieser Methode können Sie das Dom-Element einfach abrufen die Seite. beschreiben und es ist die Syntax von mocha, und jeder akzeptiert zwei Parameter. Ersteres ist die zu testende Seite, letzteres ist die Eingabeaufforderung beim Testen und beide akzeptieren eine Funktion. Die darin enthaltene Funktion besteht darin, das gewünschte Ergebnis zu bestätigen, dh ob der Inhalt von Expect () mit dem Ergebnis übereinstimmt du willst.

Ereignisbetriebstest

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

Das Gesamtformat ist ähnlich und verwendet hauptsächlich die Triggermethode von vue-test-utils, um Klickvorgänge zu simulieren

Asynchroner Betriebstest

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 wird hier für asynchrone Tests verwendet. Beachten Sie, dass hier die Methode done verwendet wird, um zu bestimmen, wann die Testausführung endet vue Natürlich müssen Sie auch den Test von vuex in Betracht ziehen. Dabei wird die Methode createLocalVue verwendet, um eine lokale und unabhängige Vue-Umgebung zu erstellen, um Auswirkungen auf die globale Vue-Umgebung zu vermeiden, und Shallow erstellt einen Wrapper, der die bereitgestellten und gerenderten Vue-Komponenten enthält. Anders als die Unterkomponente, die im Grunde mit mount identisch ist. In der offiziellen Demo wird jedoch Shallowmount verwendet, aber im eigentlichen Test wird ein Fehler gemeldet und dann durch Shallow ersetzt. Dann muss im Test ein Vuex-Store-Warehouse erstellt werden. Der Store im Projekt wird ebenfalls eingeführt und seine Getter werden den Gettern im Test zugewiesen. Dadurch wird sichergestellt, dass das Ergebnis der Behauptung das ist, was in unserem Projekt festgelegt ist.

Abschließende Bemerkungen

Schließlich ist es mein erstes Mal, dass ich einen Unit-Test schreibe, und ich weiß nicht viel darüber. Studierende, die sich speziell dafür interessieren, können einen guten Blick darauf werfen Das obige Test-Framework und die Dokumentation dieser Bibliotheken sind umfangreich.

Verwandte Empfehlungen:

Analyse der Klassen- und Stilbindung sowie der bedingten und Listenwiedergabe in Vue

Javascript- und jQuery-Methoden um Objekte zu erhalten

Das obige ist der detaillierte Inhalt vonBeispielanalyse des Unit-Tests von vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!