Introduktion till testningsramverk
Utforska testlandskapet och verktygen för Vue.
Introduktion till testningsramverk är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.
Varför testa
Automatiserade tester hittar fel innan användarna gör det, dokumenterar hur koden ska fungera och gör det möjligt att refaktorera med trygghet. När en app växer blir tester nödvändiga för att upprätthålla kvaliteten utan manuella kontroller.
Tre typer av tester
Det finns tre huvudsakliga testnivåer: enhetstester kontrollerar små delar isolerat, integrationstester kontrollerar att delar fungerar tillsammans och end-to-end-tester (e2e-tester) driver hela appen som en riktig användare.
Enhetstester
Ett enhetstest verifierar en enda funktion eller komponent isolerat, med simulerade beroenden. De är snabba och visar exakt vad som gick sönder. De flesta av era tester bör vara enhetstester.
function add(a, b) {
return a + b
}
test("add sums two numbers", () => {
expect(add(2, 3)).toBe(5)
})Integrationstester
Integrationstester kontrollerar att flera enheter samverkar korrekt, till exempel en komponent tillsammans med dess store eller ett formulär som anropar en API-wrapper. De hittar kopplingsproblem som enhetstester inte upptäcker.
End-to-end-tester
E2e-tester startar en riktig webbläsare och klickar sig igenom appen precis som en användare skulle göra. De är mest realistiska, men också långsammast och mest känsliga, så ni skriver färre sådana tester.
Testpyramiden
Testpyramiden föreslår många snabba enhetstester längst ner, färre integrationstester i mitten och ett litet antal e2e-tester högst upp. På så sätt balanseras tillförlitlighet och snabbhet.
Vitest
Vitest är en snabb, modern testkörning byggd för Vite-baserade projekt. Den har ett Jest-kompatibelt API och fungerar smidigt med Vue 3-appar som skapats med Vite.
npm install -D vitestJest
Jest är en etablerad testkörning som används brett i JavaScript-ekosystemet. Vitest efterliknar dess API (describe, test, expect), så kunskaperna kan överföras mellan dem.
describe("math", () => {
test("adds", () => {
expect(1 + 1).toBe(2)
})
})Vue Test Utils
Vue Test Utils är det officiella biblioteket för enhetstestning av Vue-komponenter. Det monterar en komponent i en testmiljö så att ni kan interagera med den och kontrollera resultatet.
npm install -D @vue/test-utilsCypress och Playwright
För e2e-testning är Cypress och Playwright populära alternativ. De automatiserar en riktig webbläsare, så att ni kan skriva skript för klick, inmatning och navigering och sedan kontrollera det användaren ser.
Välj er teknikstack
En typisk Vue 3-konfiguration använder Vitest tillsammans med Vue Test Utils för enhets- och komponenttester samt Cypress eller Playwright för e2e-tester. Den här kombinationen täcker hela pyramiden med moderna verktyg som har gott stöd.
Snabb kontroll
Testa era kunskaper om testramverk.
Sammanfattning
Tester finns på tre nivåer: enhetstester, integrationstester och e2e-tester, balanserade av testpyramiden (många enhetstester och få e2e-tester). En modern Vue-stack använder Vitest eller Jest tillsammans med Vue Test Utils för enhetstester och Cypress eller Playwright för e2e-tester. Nästa steg är att skriva riktiga enhetstester med Vue Test Utils.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Introduktion till testningsramverk” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Introduktion till testningsramverk”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Introduktion till testningsramverk”?
Utforska testlandskapet och verktygen för Vue. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Introduktion till testningsramverk”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Introduktion till testningsramverk
- Enhetstestning med Vue Test Utils
- End-to-end-testning