Component testing & CI song song: cy.mount, cy.session, Cypress Cloud

1. Component testing là gì và vì sao cần

Component testing là kiểm thử từng thành phần UI một cách cô lập, mount nó thật trong trình duyệt thay vì render cả ứng dụng như E2E. Với một fintech dashboard có hàng trăm component — nút, form nhập tiền, biểu đồ, bảng giao dịch — test E2E cho mọi tổ hợp trạng thái là quá đắt và chậm. Cypress Component Testing lấp khoảng trống giữa unit test (nhanh nhưng không render thật) và E2E (thật nhưng chậm): bạn mount một component với props cụ thể, tương tác thật, và assert bằng đúng API cy quen thuộc. Phản hồi dưới một giây khiến vòng lặp phát triển UI cực nhanh, vì bạn không phải khởi động cả backend hay điều hướng qua nhiều màn hình chỉ để chạm tới một khối nhỏ. Điều này đặc biệt giá trị trong fintech, nơi một component số dư có thể phải hiển thị đúng ở hàng chục biến thể như số âm, số rất lớn, đơn vị tiền khác nhau hay trạng thái đang đồng bộ. Với E2E, dựng đủ những tình huống ấy vừa tốn công vừa mong manh; với component test, bạn chỉ cần truyền props tương ứng là có ngay trạng thái cần kiểm.

• Cô lập: test 1 component với props/context tự chọn.
• Render thật trong browser qua Vite/webpack dev server.
• Dùng cùng API cy: get, click, type, intercept, assertion.
• Nhanh hơn E2E nhiều, dễ dựng edge case.

2. Cài đặt Component Testing (React)

Cấu hình component testing khai báo trong cùng cypress.config.js nhưng ở khối component. Bạn chọn framework (react, vue, angular, svelte) và bundler (vite hoặc webpack) để Cypress dựng dev server render component. Cypress cung cấp lệnh cy.mount thông qua adapter cypress/react (hoặc cypress/vue...). Với dự án React + Vite, cấu hình rất gọn. Sau đó bạn khai báo cy.mount trong file support component để dùng chung. Điểm mạnh là component test tái sử dụng đúng cấu hình build của app thật, nên component render giống hệt môi trường production.

// cypress.config.js — thêm khối component
const { defineConfig } = require('cypress');
module.exports = defineConfig({
  component: {
    devServer: { framework: 'react', bundler: 'vite' },
    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
  },
});

// cypress/support/component.js
import { mount } from 'cypress/react';
Cypress.Commands.add('mount', mount);
// giờ dùng cy.mount(<Component/>) trong mọi test

3. cy.mount: render component với props

Lệnh cy.mount đặt component vào cây DOM thật của Cypress. Bạn truyền props như khi dùng component trong app, kể cả callback để spy sự kiện. Sau khi mount, bạn dùng đúng cy.get, click, type và assertion như E2E — kèm đầy đủ retry-ability. Ví dụ với component nút thanh toán của fintech: mount với nhãn và trạng thái disabled, rồi kiểm hiển thị; mount với onClick là một cy.spy để xác nhận nút gọi handler đúng một lần khi bấm. Vì component render thật, bạn bắt được cả lỗi CSS, lỗi điều kiện hiển thị, lẫn lỗi logic sự kiện.