javascript / beginner
Snippet
Unit-Testing von Komponenten-Props mit Vue Test Utils
Vue Test Utils ermöglicht das Rendern von Komponenten in einer isolierten Testumgebung. Durch die Übergabe von Props über die mount-Optionen wird überprüft, ob die Komponente dynamische Eingabedaten korrekt darstellt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { mount } from '@vue/test-utils';import { expect, test } from 'vitest';import UserGreeting from './UserGreeting.vue';test('renders greeting with passed username', () => {const wrapper = mount(UserGreeting, {props: { username: 'Alex' }});expect(wrapper.text()).toContain('Hello, Alex!');});
vue
Erklärung
1
import { mount } from '@vue/test-utils';
Importiert die Hilfsfunktion mount, um die Vue-Komponente im Test zu rendern.
2
const wrapper = mount(UserGreeting, { props: { username: 'Alex' } });
Rendert die UserGreeting-Komponente und übergibt 'Alex' als username-Prop.
3
expect(wrapper.text()).toContain('Hello, Alex!');
Prüft mit einer Assertion, ob der gerenderte Text die erwartete Begrüßung enthält.