What are the key features of Vue 3 Testing Library?

What are the key features of Vue 3 Testing Library?

Vue 3 Testing Library focuses on testing Vue components with a user-centric approach. Key features include: 1. DOM Testing: It allows you to test the DOM as users would interact with it. 2. Queries: Provides various queries to select elements, like getByText, getByRole, etc. 3. Event Simulation: You can simulate user events like clicks and input changes. 4. Accessibility: Encourages testing for accessibility by using ARIA roles. 5. Integration with Jest: Works seamlessly with Jest for running tests.

How do I set it up in my Vue 3 project?

To set up Vue 3 Testing Library, first install it via npm: npm install --save-dev @testing-library/vue. Then, you can create a test file, import the library, and start writing tests for your components. Make sure you also have Jest or another testing framework configured.

Can you give me an example of a test case?

Sure! Here's a simple test case for a button component:

import { render, fireEvent } from '@testing-library/vue';
import MyButton from './MyButton.vue';

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