1. Tại sao cần chiến lược kiểm thử? Khi dự án phát triển song song cho web và mobile, một lỗi nhỏ có thể lan rộng sang cả hai nền tảng. Chiến lược kiểm thử rõ ràng giúp: - Phát hiện sớm regression khi refactor hoặc thêm tính năng. - Đảm bảo hành vi UI nhất quán giữa React Web và React Native. - Giảm chi phí sửa lỗi ở production. 2. Unit test với Jest & React Testing Library - Cài đặt Jest cùng @testing-library/react (web) và @testing-library/react-native (mobile). - Viết test cho các component thuần túy, hook tùy chỉnh (custom hook) và utility function. - Ví dụ: test hook `useAuth` kiểm tra trạng thái đăng nhập/đăng xuất mà không phụ thuộc vào renderer. - Sử dụng `act()` để xử lý cập nhật state bất đồng bộ. 3. Integration test với Mock Service Worker (MSW) - MSW cho phép mock API ở mức network, hoạt động cả trên Node (Jest) và trình duyệt (Cypress/Playwright). - Định nghĩa handlers cho các endpoint `/api/user`, `/api/products` và reuse cho cả web lẫn native. - Kiểm tra luồng: gọi API → cập nhật store (Zustand/Redux) → render UI. 4. End‑to‑End test - Web: Cypress hoặc Playwright. Viết spec cho các user journey chính (đăng nhập, thanh toán, tìm kiếm). - Mobile: Detox chạy trên emulator/simulator thật. Cùng một tập hợp scenario, nhưng thao tác bằng `device`, `element`. - Chia sẻ dữ liệu test (fixtures) giữa hai nền tảng để đảm bảo parity. 5. Tích hợp vào CI/CD - GitHub Actions: job `test-web` chạy `npm run test:unit && npm run test:e2e:web`. - Job `test-mobile` chạy trên macOS runner, start emulator, chạy `npm run test:e2e:mobile`. - Gộp báo cáo coverage bằng `codecov` hoặc `lcov` để theo dõi độ bao phủ chung. 6. Mẹo thực tế - Tách file test theo convention `*.test.ts` (unit) và `*.e2e.ts` (e2e) để dễ dàng filter. - Sử dụng `test.each` cho data‑driven test (ví dụ: nhiều locale, nhiều role). - Bật `snapshot` testing cho UI ổn định, nhưng review snapshot thường xuyên. - Cấu hình `setupFilesAfterEnv` để import `@testing-library/jest-dom` và `jest-extended` một lần cho cả hai nền tảng. Áp dụng bộ ba Unit → Integration → E2E cùng một bộ mock API và cùng một CI pipeline sẽ giúp team tin cậy khi ship tính năng cho cả React Web lẫn React Native.