How do I use user events in Vue Testing Library?

How do I use user events in Vue Testing Library?

You can use the @testing-library/user-event library to simulate user interactions in your Vue components. This allows you to test how your components respond to user actions like clicks, typing, and more.

Can you give me an example of simulating a button click?

Sure! Here's a simple example:

import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import MyButton from './MyButton.vue';

test('button click changes text', async () => {
  render(MyButton);
  const button = screen.getByRole('button');
  await userEvent.click(button);
  expect(screen.getByText('Clicked!')).toBeInTheDocument();
});

What about simulating text input?

You can simulate text input using the type method from userEvent. Here's an example:

import { render, screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import MyInput from './MyInput.vue';

test('input changes value', async () => {
  render(MyInput);
  const input = screen.getByLabelText('Your Name');
  await userEvent.type(input, 'John Doe');
  expect(input.value).toBe('John Doe');
});