How do I use async assertions in Vue Testing Library?

How do I use async assertions in Vue Testing Library?

You can use async assertions in Vue Testing Library by utilizing the waitFor function to handle asynchronous updates.

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 message after async operation', async () => {
  render(MyComponent);
  await waitFor(() => expect(screen.getByText('Async Message')).toBeInTheDocument());
});

What if the assertion fails?

If the assertion fails, waitFor will throw an error after the timeout period, indicating that the expected element was not found.

How can I customize the timeout for waitFor?

You can customize the timeout by passing an options object to waitFor, like this:

await waitFor(() => expect(screen.getByText('Async Message')).toBeInTheDocument(), { timeout: 3000 });