javascript / beginner
Snippet
Testen von reaktiver Zählerlogik mit Vitest in Vue
Unit-Tests überprüfen, ob kleine, isolierte Codeeinheiten sich wie erwartet verhalten. Bei Vue-Composables können reine Funktionen mit reaktivem Zustand direkt mit Frameworks wie Vitest getestet werden, ohne vollständige DOM-Komponenten zu mounten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { ref } from 'vue';import { describe, it, expect } from 'vitest';function useCounter(initial = 0) {const count = ref(initial);const increment = () => { count.value++; };return { count, increment };}describe('useCounter', () => {it('increments the count value by one', () => {const { count, increment } = useCounter(5);increment();expect(count.value).toBe(6);});});
vue
Erklärung
1
describe('useCounter', () => {
Gruppiert zusammenhängende Unit-Tests unter einem beschreibenden Test-Suite-Titel.
2
const { count, increment } = useCounter(5);
Initialisiert den Composable-Zustand mit einem Startwert von 5.
3
expect(count.value).toBe(6);
Prüft per Assertion, ob der Aufruf von increment() den reaktiven Wert exakt auf 6 erhöht hat.