How do I test asynchronous components in Vue using Vue Testing Library?

How do I test asynchronous components in Vue using Vue Testing Library?

To test asynchronous components in Vue with Vue Testing Library, you can use 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, waitFor } from '@testing-library/vue';
import MyComponent from './MyComponent.vue';

test('loads and displays greeting', async () => {
  const { getByText } = render(MyComponent);
  await waitFor(() => getByText('Hello, World!'));
});

What if the async operation fails?

If the async operation fails, you can use expect to assert that an error message is displayed or that the component behaves as expected.

Are there any best practices for testing async components?

Yes! Some best practices include keeping tests isolated, using mocks for async calls, and ensuring your tests are readable.