("");
onMounted(async () => {
const res = await fetch("/api/dishes");
if (!res.ok) {
error.value = "Could not load";
return;
}
names.value = ((await res.json()) as { name: string }[]).map((d) => d.name);
});
{{ error }}
`,
"MenuList.spec.ts": `import { describe, it, expect, vi } from "vitest";
describe("MenuList", () => {
it("shows the dishes from the server", async () => {
const fakeFetch = vi.fn().mockResolvedValue({
ok: true,
json: async () => [{ name: "Dosa" }, { name: "Idli" }],
});
window.fetch = fakeFetch;
const wrapper = mount(MenuList);
await flushPromises();
expect(fakeFetch).toHaveBeenCalledWith("/api/dishes");
expect(wrapper.findAll("li")).toHaveLength(2);
});
it("shows an error when the server fails", async () => {
window.fetch = vi.fn().mockResolvedValue({ ok: false, json: async () => ({}) });
const wrapper = mount(MenuList);
await flushPromises();
expect(wrapper.find(".error").text()).toBe("Could not load");
});
});
`,
"main.ts": `import { run } from "vitest";
run();
`,
}}
/>
Real Vitest has more tools: `vi.spyOn`, fake timers with `vi.useFakeTimers()`, `afterEach` and snapshot tests. This lab's runner has the common ones only: `describe`, `it`, `test`, `expect`, `beforeEach` and `vi.fn`.
**Simple lesson:** mock `fetch` with `vi.fn()`, then `await flushPromises()` before you check.
## End-to-End Tests
- **End-to-end (E2E) test** = a program drives a real browser through the whole app: open the page, click, type, check.
- It catches problems that unit tests miss: routing, real CSS, real network.
- **Playwright** is a common choice. create-vue can add it.
- E2E tests are slower. Keep a few for the most important paths, such as "order a dish".
```ts
// e2e/order.spec.ts in a real project (npx playwright test)
import { test, expect } from "@playwright/test";
test("a visitor can order a dosa", async ({ page }) => {
await page.goto("http://localhost:5173/menu");
await page.getByRole("button", { name: "Add Masala Dosa" }).click();
await page.getByRole("link", { name: "Cart" }).click();
await expect(page.getByText("1 × Masala Dosa")).toBeVisible();
});
```
- In this lab, E2E tests cannot run, because they need their own browser. The code above is the real shape.
## TL;DR
- **Test** = code that uses your code and checks the result.
- **What to test** = what users see and do, not private details.
- **Vitest** = `describe` groups, `it` tests, `expect(x).toBe(y)` checks.
- **`mount(C, { props })`** = renders a component and returns a wrapper.
- **`find` / `findAll` / `text`** = locate elements and read them.
- **`await trigger()` / `await setValue()`** = act like a user, then wait for the update.
- **`emitted("name")`** = the events a component sent, with their data.
- **Stores** = `setActivePinia(createPinia())` before each test.
- **Mocks** = `vi.fn().mockResolvedValue(x)` and `flushPromises()`.
## Common mistakes
| Mistake | Wrong idea | Correct idea | What goes wrong |
|---|---|---|---|
| No `await` after `trigger` | The DOM updates at once | `await wrapper.find(...).trigger(...)` | Checks read the old page |
| Testing private details | Test every internal variable | Test what the user sees | Tests break on every refactor |
| One store shared by all tests | Tests are independent anyway | Fresh Pinia in `beforeEach` | Tests pass or fail depending on order |
| Calling the real server | Real data is more honest | Mock `fetch` | Slow, flaky tests |
| Checking before Promises finish | `mount` waits for data | `await flushPromises()` | Empty lists in assertions |
| `toBe` for arrays | `toBe` compares contents | Use `toEqual` | Equal-looking arrays fail |
## Check Yourself
## Exercises
## What to Remember
- Test what users see and do, not private details.
- `describe`, `it` and `expect` are the core of Vitest.
- Mount with VTU, then `await` every `trigger` and `setValue`.
- Check events with `emitted()`. Give each store test a fresh Pinia.
- Mock `fetch` with `vi.fn()` and wait with `flushPromises()`.
Next: **Performance**