‏react-native-preflight: تست E2E ری‌اکت نیتیو بدون سربار

react-native-preflight یه کتابخونه‌ست که تست‌های end-to-end (E2E) — یعنی تست‌هایی که رفتار کامل اپ رو مثل یه کاربر واقعی شبیه‌سازی می‌کنن — روی React Native رو با ابزار Maestro خیلی راحت‌تر می‌کنه. مشکل اصلی که حل می‌کنه اینه که برای تست یه صفحه خاص، معمولاً باید کل فلوی ناوبری رو طی کنی و state اپ رو دستی بسازی؛ این ابزار اون مرحله رو حذف می‌کنه.

ایده اصلی دور تابع scenario() می‌چرخه. وقتی یه کامپوننت رو با این تابع wrap می‌کنی، صفحه‌ات توی یه رجیستری ثبت می‌شه. بعد می‌شه مستقیماً از طریق deep link بهش رسید و قبل از باز شدن، state موردنیاز (مثل داده‌های کش یا استور) رو تزریق کرد — بدون اینکه صفحه حتی یه لحظه flash کنه.

export default scenario(
  {
    id: 'settings',
    route: '/settings',
    inject: async () => {
      // Pre-populate stores, query cache, etc.
    },
    test: ({ see, tap }) => [
      see('Settings'),
      tap('dark-mode-toggle'),
    ],
  },
  function SettingsScreen() {
    // your component...
  },
);

کامپوننت StateInjector باید دور root layout اپ گذاشته بشه. این کامپوننت deep linkهای preflight:// رو می‌گیره، تابع inject رو صدا می‌زنه و بعد ناوبری انجام می‌ده. هم با Expo Router (به‌صورت خودکار) و هم با React Navigation (از طریق prop به نام onNavigate) کار می‌کنه.

یکی از قابلیت‌های مهم، Visual Regression یا شناسایی تغییرات بصری ناخواسته‌ست. با دستور npx preflight test --all --snapshot می‌شه از همه صفحه‌ها اسکرین‌شات گرفت و بعد با npx preflight snapshot:compare نسخه‌های مختلف رو مقایسه کرد. نتیجه به شکل یه گزارش HTML نمایش داده می‌شه و در محیط CI می‌شه با فلگ --ci در صورت regression با exit code 1 خارج شد.

نکته کلیدی اینه که یه Babel plugin همراه ابزار هست که در بیلد پروداکشن، تمام کدهای مربوط به scenario() و رو کاملاً حذف می‌کنه و فقط کامپوننت اصلی رو نگه می‌داره. یعنی هیچ کد تستی وارد اپ نهایی نمی‌شه:

// babel.config.js
module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    ['react-native-preflight/babel', { strip: process.env.NODE_ENV === 'production' }],
  ],
};

نکات کلیدی:

• تابع scenario() هر صفحه رو برای تست ایزوله می‌کنه و state از قبل تزریق می‌شه
• StateInjector باید توی root layout قرار بگیره و با Expo Router و React Navigation هر دو سازگاره
• امکان تعریف variants برای تست حالت‌های مختلف یه صفحه (مثلاً با داده یا خالی) وجود داره
• با flow می‌شه جریان‌های چند صفحه‌ای مثل onboarding رو هم تست کرد
• Babel plugin کد preflight رو از بیلد پروداکشن کاملاً پاک می‌کنه
• ابزار CLI برای init، generate کردن YAML، اجرای تست و مقایسه snapshot فراهمه
• یه پلاگین Claude Code هم داره که setup اولیه رو کاملاً اتوماتیک انجام می‌ده