Khi phát triển ứng dụng chạy đồng thời trên web và mobile, việc đảm bảo chất lượng qua kiểm thử tự động trở thành yếu tố then chốt. Bài viết này chia sẻ quy trình thực tế để thiết lập pipeline kiểm thử End‑to‑End (E2E) thống nhất cho React Web (dùng Cypress) và React Native (dùng Detox), giúp đội ngũ phát hiện lỗi sớm và giảm thiểu regression. 1. Xác định phạm vi kiểm thử - Liệt kê các luồng người dùng cốt lõi: đăng nhập, đăng ký, thanh toán, đồng bộ dữ liệu offline, điều hướng giữa màn hình. - Phân chia test case thành nhóm chung (logic nghiệp vụ) và nhóm riêng biệt (giao diện web vs mobile). 2. Cấu hình môi trường chung - Sử dụng monorepo (Nx hoặc Turborepo) để chia sẻ code test utilities, fixtures và custom commands. - Tạo file cấu hình `.env.test` chứa base URL API, khóa test, và flag bật/tắt mock server. 3. Thiết lập Cypress cho Web - Cài đặt `cypress` và `cypress-testing-library` để viết test theo tư duy người dùng. - Viết custom command `loginViaApi()` để lấy token JWT qua API, tránh đăng nhập qua UI mỗi lần. - Sử dụng `cy.intercept()` để mock các request bên ngoài (payment gateway, analytics) giúp test chạy nhanh và ổn định. 4. Thiết lập Detox cho React Native - Cài đặt `detox` và `jest` làm test runner. - Cấu hình `detox` trong `package.json` với hai scheme: `ios.debug` và `android.debug`. - Viết helper `device.launchApp({ newInstance: true, delete: true })` để đảm bảo trạng thái sạch trước mỗi spec. - Mock native modules (push notification, biometric) bằng `jest.mock` để tránh phụ thuộc thiết bị thật. 5. Chia sẻ test data và helper - Tạo thư mục `shared/e2e/fixtures` chứa JSON mẫu cho user, product, order. - Viết utility `generateTestUser()` trả về object đồng nhất cho cả hai nền tảng. 6. Tích hợp vào CI/CD - Trong GitHub Actions, chạy job `test-web` trên `ubuntu-latest` với `cypress run --record`. - Chạy job `test-mobile` trên macOS runner cho iOS và Ubuntu runner cho Android (dùng emulator). - Sử dụng `artifact` để lưu video, screenshot khi test fail, giúp debug nhanh. 7. Chiến lược flaky test - Áp dụng retry tự động: Cypress `retries: 2` trong `cypress.json`, Detox `testRunner: 'jest', specReporter: true, retry: 2`. - Theo dõi tỷ lệ flaky qua dashboard, ưu tiên refactor test không ổn định. 8. Lời khuyên thực tế - Bắt đầu với tập test smoke (5‑7 case quan trọng nhất) rồi mở rộng dần. - Giữ test độc lập: không phụ thuộc thứ tự chạy, cleanup dữ liệu sau mỗi spec. - Đầu tư vào mock server (MSW cho web, `detox` mock cho native) để giảm phụ thuộc backend. - Review test code như production code: lint, type‑check, và code review bắt buộc. Với quy trình trên, đội ngũ có thể tự tin deploy liên tục cho cả React Web và React Native, biết rằng các luồng nghiệp vụ quan trọng đã được kiểm chứng tự động trên mọi nền tảng.