javascript / beginner
Snippet
Überprüfen von gerendertem Prop-Inhalt in Komponententests
Das Testen von Vue-Komponenten beinhaltet das isolierte Mounten und Übergeben von Props, um die Textausgabe zu prüfen. Bibliotheken wie `@vue/test-utils` und `vitest` stellen sicher, dass Komponenten korrekt auf Eingabedaten reagieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { mount } from '@vue/test-utils';import { describe, it, expect } from 'vitest';import UserBadge from './UserBadge.vue';describe('UserBadge.vue', () => {it('renders the username passed via props', () => {const wrapper = mount(UserBadge, {props: {username: 'AlexDev'}});expect(wrapper.text()).toContain('AlexDev');});});
vue
Erklärung
1
const wrapper = mount(UserBadge, { props: { username: 'AlexDev' } });
Mountet die Vue-Komponenteninstanz und übergibt Test-Properties.
2
expect(wrapper.text()).toContain('AlexDev');
Prüft, ob der gerenderte Textinhalt der Komponente den übergebenen Benutzernamen enthält.