javascript / beginner
Snippet
Überprüfen des anfänglichen Zählertexts mit Vue Test Utils
Das Testen von Komponenten stellt sicher, dass Rendering und Schnittstellen wie erwartet funktionieren. Mit der mount-Funktion der Vue Test Utils und Vitest lässt sich eine Komponente mit definierten Props erzeugen, gezielt nach DOM-Elementen suchen und deren Textinhalt überprüfen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { mount } from '@vue/test-utils';import { describe, it, expect } from 'vitest';import CounterDisplay from './CounterDisplay.vue';describe('CounterDisplay.vue', () => {it('renders the initial count passed via props', () => {const wrapper = mount(CounterDisplay, {props: {initialCount: 5}});const countSpan = wrapper.find('[data-test="count-value"]');expect(countSpan.exists()).toBe(true);expect(countSpan.text()).toBe('5');});});
vue
Erklärung
1
import { mount } from '@vue/test-utils';
Importiert die mount-Funktion, um eine Vue-Komponente in einer isolierten Testumgebung zu rendern.
2
const wrapper = mount(CounterDisplay, { props: { initialCount: 5 } });
Rendert die Zielkomponente und übergibt die initialCount-Prop als Testwert.
3
const countSpan = wrapper.find('[data-test="count-value"]');
Durchsucht den gerenderten DOM-Baum nach einem Element mit dem data-test-Attribut.
4
expect(countSpan.exists()).toBe(true);
Prüft, ob das gesuchte DOM-Element tatsächlich im Markup vorhanden ist.
5
expect(countSpan.text()).toBe('5');
Überprüft, ob der gerenderte Textinhalt exakt der Zeichenkette '5' entspricht.