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

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

To test async queries in Vue.js with Testing Library, you can use the waitFor function 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('Loaded Data'));
  expect(screen.getByText('Loaded Data')).toBeInTheDocument();
});

What if the async query fails?

You can handle errors by using try-catch in your async function and displaying an error message in your component.

Is there a way to mock the async data?

Yes, you can mock async data using libraries like jest to simulate API responses in your tests.