How to test async components in Vue?

Question

Accepted Answer

**Async components** — testing async behavior.

```typescript
import { describe, it, expect, vi } from "vitest"
import { mount } from "@vue/test-utils"
import AsyncComponent from "./AsyncComponent.vue"

describe("AsyncComponent", () => {
    it("loads data", async () => {
        // Mock async data
        vi.spyOn(global, "fetch").mockResolvedValue({
            json: () => Promise.resolve({ items: [1, 2, 3] })
        })
        
        const wrapper = mount(AsyncComponent)
        
        // Wait for data to load
        await wrapper.vm.$nextTick()
        
        expect(wrapper.findAll("li")).toHaveLength(3)
    })
})
```

Vue.js: How to test async components in Vue?