Bài này nói về kiểm thử frontend mức senior cho phỏng vấn: unit Vitest, component Vue Testing Library, E2E Playwright, policy coverage, cách cân nhắc TDD/BDD, và cách đưa contract vào app Vue legacy. Người phỏng vấn chấm strategy: tầng nào bắt lỗi nào, thứ bạn từ chối test, cách giữ CI xanh khi flake. Không phải kata sum(2, 3).

Đọc 8.1–8.3 trước (unit, component, E2E). Rồi 8.4–8.5 cho coverage và cách cân nhắc TDD. 8.6 là nước đi production: contract, phạm vi visual regression, và lưới an toàn cho legacy. Cấu trúc thường thắng là testing trophy: nhiều integration quanh hành vi user, vài path Playwright cho tiền và auth, unit cho domain thuần, và static analysis làm đế rẻ. Vue 3 + TypeScript trước; cùng philosophy trên app Next là React Testing Library / Playwright.

Tóm tắt: Unit test là arrange, act, assert trên contract của hàm: tiền, permission, parser, không phải một cây component. Vitest là runner (Vite-native, tương thích Jest). HTTP nằm sau MSW (Mock Service Worker: chặn fetch/xhr ở network). Composable kéo Router, Pinia và useFetch là integration.

Vì sao quan trọng: Composable search catalog kéo Vue Router, Pinia, useFetch và plugin toast. “Bạn unit-test app Vue thế nào?” là câu mở: họ đang nghe thứ bạn từ chối mock, không phải tour config Vitest. Mock “cả thế giới” thì test vẫn xanh trong khi checkout gãy.

1. Cách hoạt động: Arrange input và seam (hàm thuần, hoặc handler MSW). Act bằng cách gọi hàm hoặc gán ref. Assert contract domain hoặc thứ user thấy (invoiceTotalCents, items.value), không phải tên ref nội bộ. Khôi phục fake trong afterEach: vi.useRealTimers(), vi.unstubAllGlobals().
2. MSW (setupServer + http.get) là seam HTTP: composable vẫn gọi fetch. vi.mock("./api") buộc test vào path của module; đổi tên vẫn xanh. Fake timer (vi.useFakeTimers + advanceTimersByTimeAsync) phụ trách debounce; quên flushPromises sau việc async của Vue là false-red số 1.
3. Tách lõi thuần khi composable kéo cả thế giới: invoiceTotalCents(lines, taxBps) là unit; useCatalogSearch với Pinia thật và MSW là integration. Tương đương React: cùng cách tách, hàm thuần so với React Testing Library kèm MSW. Đừng snapshot markup lớn: nó fail vì class name đổi liên tục.

const server = setupServer(
  http.get("/api/catalog", ({ request }) => {
    const q = new URL(request.url).searchParams.get("q") ?? ""
    return HttpResponse.json({ items: q ? [{ sku: "A", name: q }] : [] })
  }),
)
beforeAll(() => server.listen())
afterEach(() => { server.resetHandlers(); vi.useRealTimers() })
it("surfaces results after the debounce settles", async () => {
  vi.useFakeTimers()
  const { query, items } = useCatalogSearch({ debounceMs: 300 })
  query.value = "sku-9"
  await vi.advanceTimersByTimeAsync(300)
  await flushPromises() // flush Vue + microtask fetch; bỏ bước này → false red
  expect(items.value).toEqual([{ sku: "A", name: "sku-9" }])
})
export function invoiceTotalCents(lines: Line[], taxBps: number): number {
  const sub = lines.reduce((sum, l) => sum + l.qty * l.unitCents, 0)
  return sub + Math.round((sub * taxBps) / 10_000) // unit cái này; đừng mock
}

Điều gì xảy ra: Test search nói với MSW, không phải api.ts bị mock. Tăng 300 ms thì debounce chạy; flushPromises để Vue và fetch settle. Đổi tên ref nội bộ không fail. Đổi toán thuế trong invoiceTotalCents thì fail: đó là unit bạn giữ cạnh integration.

Lỗi hay gặp

• Triệu chứng: suite xanh, checkout gãy. Nguyên nhân: vi.mock cả thế giới. Cách xử lý: MSW kèm hàm domain thuần.
• Triệu chứng: false red sau debounce. Nguyên nhân: quên flushPromises / khôi phục timer. Cách xử lý: cleanup afterEach.
• Triệu chứng: PR cháy một ngày vì -u. Nguyên nhân: snapshot cả markup. Cách xử lý: assert items.value.
• Triệu chứng: test composable mount Vue, Pinia và toast. Nguyên nhân: bạn gọi đó là unit. Cách xử lý: gọi là integration, hoặc tách lõi.

Tóm tắt: Test component assert hành vi user thấy, không phải implementation. Query theo role, label và text; click như user. mount (cả cây) là mặc định. shallowMount stub child và giấu bug bạn đưa lên. Vue Testing Library (VTL) là wrapper Testing Library; Vue Test Utils (VTU) là wrapper tầng thấp.

Vì sao quan trọng: Họ đưa nút Pay rồi hỏi mount khác shallowMount thế nào, cách chờ UI async, và bạn assert gì. wrapper.find(".btn-primary") kèm snapshot cả HTML là câu junior. Đổi tên class không được fail; gỡ emit("paid") thì phải fail.

1. Cách hoạt động: Render bằng VTL render (hoặc VTU mount). Tìm getByRole("button", { name: /pay/i }). Click bằng userEvent. Chờ bằng waitFor / flushPromises: Vue flush DOM bất đồng bộ, nên click trả về trước khi handler xong là nói dối. Assert disabled / text / có mặt, không phải vm.loading.
2. shallowMount stub child. Bạn không còn test slot, provide/inject, Teleport, hoặc PayButton lồng nhau mà không bao giờ disable. Chỉ dùng khi child là canvas hoặc map bạn không thể render. Query dialog Teleport trên document.body, không trên wrapper.
3. Chạy Pinia thật và memory router. Stub mọi action là đang test cái mock. Tương đương React: cùng contract là React Testing Library: getByRole, userEvent, không Enzyme shallow. Playwright component dành cho layout hoặc focus thật; thường E2E path đó (8.3).

it("disables Pay while the payment intent is in flight", async () => {
  const user = userEvent.setup()
  const pinia = createPinia() // store thật; stub pay() là test cái mock
  render(PayButton, {
    props: { amountCents: 1999, currency: "USD" },
    global: { plugins: [pinia] },
  })
  await user.click(screen.getByRole("button", { name: /pay \$19\.99/i }))
  await waitFor(() => {
    expect(screen.getByRole("button", { name: /processing/i })).toBeDisabled()
  })
  // đổi tên .btn-primary → vẫn xanh; gỡ emit("paid") → đỏ
})

Điều gì xảy ra: Người test click nút Pay theo tên, không phải .btn-primary. Khi intent đang gửi, tên accessible thành Processing và control bị disable. waitFor phủ flush async của Vue. Đổi tên class vẫn xanh; gỡ emit paid thì không.

Lỗi hay gặp

• Triệu chứng: đổi tên class fail CI. Nguyên nhân: selector CSS + snapshot. Cách xử lý: role và tên.
• Triệu chứng: Pay không disable ở prod. Nguyên nhân: shallowMount stub PayButton. Cách xử lý: mount.
• Triệu chứng: query dialog ra null. Nguyên nhân: Teleport ra body. Cách xử lý: query document.body.
• Triệu chứng: flake lúc click. Nguyên nhân: không waitFor sau Vue async. Cách xử lý: waitFor / flushPromises.

Tóm tắt: Playwright chạy browser thật, chỉ trên critical path: login, permission-denied, checkout, refund, SSO. Chọn theo role và tên. Auto-wait trên assert (toBeVisible), đừng waitForTimeout. Auth là storageState từ project setup, kèm một spec login riêng.

Vì sao quan trọng: Checkout đỏ trên CI cứ thứ Ba cách tuần vì waitForTimeout(3000) và email staging dùng chung. Câu “Bạn E2E gì?” rồi đến flake, POM khác fixture, auth, trace, và worker. E2E là thứ CI bỏ qua đầu tiên khi đỏ. Hãy budget một nắm spec.

1. Cách hoạt động: Playwright auto-wait: action trên locator retry đến khi element actionable; expect(locator).toBeVisible() retry đến timeout. waitForTimeout là sleep: máy chậm thì flake, máy nhanh thì nói dối. Ưu tiên assert locator hơn networkidle. Websocket và analytics không bao giờ idle.
2. Auth: project setup ghi storageState; project khác dùng lại. Giữ một spec login UI để regression login không giấu được. Worker > 1 cần user riêng (email unique), không dùng chung một cashier. Trace-on-first-retry giúp job đỏ chẩn đoán được mà không SSH.
3. Fixture (test.extend) hơn Page Object bọc mọi click. POM đáng dùng khi cùng widget checkout xuất hiện trong ba spec. Tắt animation (prefers-reduced-motion). Playwright hơn Cypress năm 2026: nhiều context, trace, storageState, không magic retry ngầm trên click. Analog Vue: cùng path trên app Nuxt; analog Next: cũng vậy, chú ý payload RSC khác nav client.

export default defineConfig({
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  use: {
    trace: "on-first-retry", // job đỏ không có trace là tiền bỏ đi
    screenshot: "only-on-failure",
    storageState: "playwright/.auth/user.json",
  },
  projects: [
    { name: "setup", testMatch: /auth\.setup\.ts/ },
    { name: "chromium", dependencies: ["setup"] },
  ],
})
test("checkout completes with a saved card", async ({ page }) => {
  await page.goto("/checkout")
  await page.getByRole("button", { name: "Pay now" }).click()
  await expect(page.getByRole("heading", { name: "Order confirmed" })).toBeVisible()
  // đừng waitForTimeout(3000): auto-wait heading
})

Điều gì xảy ra: Setup login một lần rồi ghi cookie. Chromium dùng lại state đó, nên checkout không gõ password. Assert heading được auto-wait. Không còn sleep timeout. Fail trên CI thì retry kèm trace bạn mở được local.

Lỗi hay gặp

• Triệu chứng: đỏ cứ thứ Ba cách tuần. Nguyên nhân: waitForTimeout + email dùng chung. Cách xử lý: assert locator + user riêng.
• Triệu chứng: CI treo. Nguyên nhân: networkidle trên SPA websocket. Cách xử lý: toBeVisible trên heading.
• Triệu chứng: regression login lên prod. Nguyên nhân: mọi spec chỉ dùng storageState. Cách xử lý: một spec login UI.
• Triệu chứng: đỏ không chẩn đoán được. Nguyên nhân: không trace. Cách xử lý: trace: "on-first-retry".

Tóm tắt: Coverage là nhánh nào của code rủi ro đã chạy, không phải điểm chất lượng. Coverage dòng dễ bị làm đẹp. Coverage nhánh trên tiền, auth và permission mới là số hữu ích. v8 (mặc định của Vitest) không thấy Playwright. Báo cáo unit 90% vẫn có thể nghĩa là chưa ai click checkout trên browser.

Vì sao quan trọng: “Bạn yêu cầu coverage bao nhiêu?” Nếu bạn nói 80% làm gate cả repo, nhiều người phỏng vấn chấm junior, nhất là khi canRefund() chưa test và snapshot đệm số. Team thêm /* istanbul ignore */ và file generate để bảo vệ metric. Đó là diễn kịch coverage.

1. Cách hoạt động: Instrument Vitest (coverage.provider: "v8") để lấy insight. Include src/domain/** và composable auth/checkout. Exclude spec và code generate. Fail CI khi coverage nhánh tụt trong list include đó, không phải trên pages/ hoặc chrome SFC Vue. Test snapshot phình coverage dòng mà không đi qua nhánh.
2. E2E critical path (8.3) là gate riêng. Coverage của suite mock hết mọi thứ là coverage cái mock. Hàm permission có nhánh (canRefund captured khác pending khác expired); snapshot nút refund thì không. Mutation testing (Stryker) chỉ đáng trên module domain nhỏ, sau khi đã có số nhánh.
3. Trên Next, wrapper RSC và type generate sẽ phá gate cả repo. Cùng policy: instrument domain, không phải app/. Analog Vue: đừng include .nuxt/ hoặc stub auto-import. Câu phỏng vấn là bản đồ rủi ro, không phải phần trăm.

// Để lấy insight, không phải club 80%. Nhánh tụt ở domain fail CI; pages/ thì không.
export default defineConfig({
  test: {
    coverage: {
      provider: "v8", // không thấy path Playwright
      include: ["src/domain/**", "src/composables/useAuth.ts", "src/composables/useCheckout.ts"],
      exclude: ["**/*.spec.ts", "src/generated/**"],
      thresholds: {
        "src/domain/**": { branches: 90, statements: 0 },
      },
      reporter: ["text", "html"],
    },
  },
})

Điều gì xảy ra: v8 chỉ báo list include. Nhánh tụt ở src/domain fail CI. pages/ có thể ngồi ở 20% mà không chặn. Playwright vẫn phải click checkout. Config này không thấy click đó.

Lỗi hay gặp

• Triệu chứng: 90% xanh, canRefund chưa test. Nguyên nhân: snapshot đệm dòng. Cách xử lý: ngưỡng nhánh trên domain.
• Triệu chứng: gate Next/Nuxt luôn đỏ. Nguyên nhân: wrapper RSC / .nuxt trong include. Cách xử lý: exclude phần generate.
• Triệu chứng: diễn kịch. Nguyên nhân: istanbul ignore và test rỗng. Cách xử lý: review list include, không phải con số.
• Triệu chứng: checkout chưa test trên browser. Nguyên nhân: tin v8. Cách xử lý: path tiền Playwright làm gate riêng.

Tóm tắt: TDD (test-driven development) là đỏ → xanh → refactor trên một contract ổn định: giá, RBAC, parser, adapter trên fixture OpenAPI đã đóng băng. BDD (behaviour-driven development) là ngôn ngữ chung trong title test (Given / When / Then), không phải stack Cucumber. Đừng TDD padding của modal.

Vì sao quan trọng: “Bạn có TDD không?” Họ muốn cách cân nhắc, không phải tuyên ngôn, và họ ngửi ra diễn kịch TDD (test đề ngày hôm qua, viết sau) hoặc “we TDD” kèm 0% coverage permission. Nếu PM vẫn đang đổi bước checkout, test-first chỉ mã hóa phỏng đoán của hôm qua.

1. Cách hoạt động: Đỏ: viết ví dụ fail của contract (canRefund trong 24h). Xanh: implementation nhỏ nhất. Refactor: tên và chỗ trùng, test vẫn xanh. Tên test là spec bạn review trong PR: “Given a captured card payment, When it is within 24h, Then the cashier may refund in full”.
2. Spike UI đang khám phá, rồi khóa hành vi bằng Testing Library (8.2). TDD adapter trên fixture đã đóng băng; khi spec vẫn còn đổi, bạn đang mã hóa một phỏng đoán. Cucumber / Given 40 tầng chỉ đáng nếu org đã chạy Gherkin và có người chịu trách nhiệm glue. Không thì title là đủ.
3. Contract test (8.6) hơn kata Cart.addItem khi nói “TDD trong codebase này”. Review tên test như spec. Từ chối test assert nội bộ. Thành thật “khi TDD làm mình chậm”: visual design system, hoặc spike một route Nuxt mới.

// Đỏ: fail đến khi canRefund tồn tại. Title là spec QA/PM đọc được.
describe("refund eligibility", () => {
  it("Given a captured card payment, When it is within 24h, Then the cashier may refund in full", () => {
    expect(canRefund({ status: "captured", method: "card", ageHours: 6 })).toEqual({
      allowed: true,
      maxCents: 6_00,
    })
  })
  it("Given a pending payment, When the cashier opens refund, Then it is denied", () => {
    expect(canRefund({ status: "pending", method: "card", ageHours: 1 }).allowed).toBe(false)
  })
})
// Xanh: implement canRefund. Refactor: tách ageHours khác status mà không gãy title.

Điều gì xảy ra: Title chính là spec product. Đỏ fail vì thiếu hàm. Xanh là canRefund nhỏ nhất. Refactor nội bộ sau đó vẫn giữ cả hai title xanh. QA đọc tên mà không cần mở Cucumber.

Lỗi hay gặp

• Triệu chứng: test ghi ngày hôm qua. Nguyên nhân: diễn kịch TDD. Cách xử lý: review ngày git so với feature; hỏi commit đỏ.
• Triệu chứng: flow nặng designer chậm 3×. Nguyên nhân: giáo điều TDD trên padding. Cách xử lý: spike UI, rồi khóa bằng Testing Library.
• Triệu chứng: QA phụ trách Cypress, dev phụ trách Vitest, không chung ngôn ngữ. Nguyên nhân: BDD chết ở hai toolchain. Cách xử lý: title cả hai phía.
• Triệu chứng: “we TDD” và canRefund trống. Nguyên nhân: văn hóa kata. Cách xử lý: TDD contract tiền.

Tóm tắt: Contract test kiểm tra hai phía của một biên vẫn khớp, thường là HTTP: type generate và handler MSW từ cùng spec OpenAPI, để breaking change fail CI trước merge. Visual regression diff pixel trên theme đã khóa. Trên Vue legacy, characterize tiền/auth trước; đừng bắt đầu ở 80% coverage.

Vì sao quan trọng: API đổi mà UI vẫn lên. Hoặc: app Vue 2/3 không có test, ai đó muốn 80% coverage sau rewrite Composition API. Bạn bắt đầu từ đâu, và có làm visual regression không? Type TS viết tay bị lệch. Percy mọi chart dashboard thành 200 diff flake vì font.

1. Cách hoạt động: Một spec → type OpenAPI + handler MSW generate từ đó. Test component đánh những handler đó, nên chúng test UI theo contract, không phải mock tưởng tượng. Pact (consumer-driven contracts) giúp khi nhiều consumer deploy tách khỏi API. Bỏ Pact trên monolith Nuxt với server/api đặt cạnh.
2. Visual: atom design system kèm vài màn marketing/checkout. Khóa theme, viewport, timezone, animations: disabled. Diff được review, không auto-approve. Bỏ mọi chart dashboard và webfont chưa khóa. Storybook/Chromatic cho atom; screenshot Playwright cho path chrome checkout.
3. Vue legacy không có test: Playwright trên login và path doanh thu trước (characterization: khóa hành vi hiện tại, dù xấu). Tách hàm thuần rồi unit những hàm đó. Rồi MSW trên client Axios sẵn có. Đừng chờ rewrite, và đừng bắt đầu ở 80%. Giữ E2E xanh xuyên đổi compiler Vue 2 → 3 để còn bước được.

// Cùng spec OpenAPI → type + MSW. Field phá vỡ fail CI trước merge.
import { paths } from "./openapi" // generated
import { HttpResponse, http } from "msw"
type Catalog = paths["/api/catalog"]["get"]["responses"]["200"]["content"]["application/json"]
export const catalogHandler = http.get("/api/catalog", () =>
  HttpResponse.json({ items: [{ sku: "A", name: "sku-9" }] } satisfies Catalog),
)
// Characterization legacy: khóa hôm nay, rồi tách. Đừng bắt đầu ở 80%.
test("cashier can refund a captured card from the order page", async ({ page }) => {
  await page.goto("/orders/1001")
  await page.getByRole("button", { name: "Refund" }).click()
  await expect(page.getByRole("status")).toHaveText(/refund queued/i)
})

Điều gì xảy ra: satisfies Catalog sẽ không compile nếu spec bỏ name. Spec Playwright khóa hành vi refund trên màn Vue 2 bạn đang có (lưới characterization) trước khi ai rewrite SFC.

Lỗi hay gặp

• Triệu chứng: UI lên, API gãy. Nguyên nhân: type viết tay. Cách xử lý: generate type + MSW từ một spec.
• Triệu chứng: 200 visual diff flaky. Nguyên nhân: font chưa khóa / mọi chart. Cách xử lý: atom + checkout, khóa theme.
• Triệu chứng: rewrite kẹt, vẫn chưa có test. Nguyên nhân: 80% trước. Cách xử lý: Playwright tiền/auth, rồi tách.
• Triệu chứng: mock HAR lệch. Nguyên nhân: record một lần, không bao giờ generate lại. Cách xử lý: generate từ pipeline spec.