How do I test async APIs with Vue Testing Library?

How do I test async APIs with Vue Testing Library?

To test async APIs with Vue Testing Library, you can use the waitFor utility to wait for elements to appear.

Can you show me a code example?

Sure! Here's a simple example:

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

test('loads and displays data', async () => {
  render(MyComponent);
  await waitFor(() => screen.getByText('Data Loaded'));
  expect(screen.getByText('Data Loaded')).toBeInTheDocument();
});

What if the API call fails?

You can test for error handling by mocking the API call to reject and then checking for the error message in the DOM.

Are there any best practices for testing async components?

Yes, always ensure to clean up after tests, use async/await for clarity, and mock API calls to avoid hitting real endpoints.