How do I test async hooks in Vue.js using Testing Library?

How do I test async hooks in Vue.js using Testing Library?

To test async hooks in Vue.js with Testing Library, you can use the waitFor utility to handle asynchronous updates.

Can you provide a code example?

Sure! Here's a simple example:

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

test('it fetches data asynchronously', async () => {
  const { getByText } = render(MyComponent);
  await waitFor(() => getByText('Data loaded'));
});

What if the async operation fails?

You can test for error handling by mocking the async function to throw an error and then asserting that the error message is displayed.

Are there any best practices for testing async hooks?

Yes, always ensure to clean up after tests, use waitFor for assertions, and mock external API calls to avoid flaky tests.