javascript / beginner
Snippet
Verifying Rendered Prop Content in Component Tests
Unit testing Vue components involves mounting them in isolation and passing props to assert the rendered output. Tools like `@vue/test-utils` and `vitest` allow developers to verify that components react correctly to input data.
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
Breakdown
1
const wrapper = mount(UserBadge, { props: { username: 'AlexDev' } });
Mounts the Vue component instance and injects test properties.
2
expect(wrapper.text()).toContain('AlexDev');
Asserts that the component's rendered text content contains the provided username.