Snippet

Unit Testing Component Props with Vue Test Utils

Vue Test Utils allows mounting components in an isolated test environment. Passing props through the mount options verifies that the component correctly renders dynamic input data.

snippet.js

javascript

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

Breakdown

import { mount } from '@vue/test-utils';

Imports the mount helper function to render the Vue component in tests.

const wrapper = mount(UserGreeting, { props: { username: 'Alex' } });

Mounts the UserGreeting component while passing 'Alex' as the username prop.

expect(wrapper.text()).toContain('Hello, Alex!');

Asserts that the rendered text inside the component includes the expected greeting.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Unit Testing Component Props with Vue Test Utils

Related