How do I handle async issues in Vue Testing Library?

How do I handle async issues in Vue Testing Library?

You can handle async issues in Vue Testing Library by using the waitFor utility to wait for elements to appear.

Can you give me an example of using waitFor?

Sure! Here's a simple example:

import { render, screen, waitFor } from '@testing-library/vue';
import MyComponent from './MyComponent.vue';

test('displays data after async call', async () => {
  render(MyComponent);
  await waitFor(() => expect(screen.getByText('Async Data')).toBeInTheDocument());
});

What if the async call fails?

If the async call fails, you can handle errors by using try-catch blocks or by asserting that an error message is displayed.

Are there any best practices for testing async components?

Yes! Some best practices include keeping tests isolated, using mocks for async calls, and ensuring proper cleanup after tests.