راهنمای آزمایش عکس فوری با استفاده از JEST به اجزای بومی واکنش نشان می دهد

تصور کنید که یک دکمه بومی React Beautive ایجاد کرده اید ، و می خواهید مطمئن شوید ساختار آن هرگز به طور تصادفی تغییر نمی کند با رشد برنامه شما

آیا اگر راهی برای گرفتن “عکس” از مؤلفه شما وجود داشته باشد ، جالب نخواهد بود و بعداً به طور خودکار بررسی می کنید که آیا هنوز هم یکسان به نظر می رسد؟

این دقیقاً همان چیزی است که تست عکس فوری می دهد

در این راهنما یاد خواهید گرفت:

• تست عکس فوری چیست
• چرا مفید است
• چگونه آن را تنظیم کنیم
• چگونه اولین تست عکس فوری خود را بنویسیم
• اشتباهات رایج و بهترین شیوه ها

بیایید از ابتدا شروع کنیم. 📸

تست عکس فوری چیست؟

فکر کردن تست عکس فوری مثل گرفتن تصویر از خروجی مؤلفه شما (ساختار و کد UI آن).

بعداً ، هر بار که آزمون را دوباره اجرا کردید ، شوخی می کند:

• گرفتن عکس فوری جدید از مؤلفه
• مقایسه آن با عکس فوری قدیمی
• به شما بگویید اگر چیزی تغییر کرده است

اگر به طور غیر منتظره ای تغییر کند ، شوخی به شما هشدار می دهد:

“سلام! مؤلفه شما متفاوت به نظر می رسد. آیا مطمئن هستید که این همان چیزی است که شما می خواهید؟”

✅ این یک است راه سریع برای تشخیص تغییرات غیر منتظره در نحوه ساخت اجزای شما.

چرا از آزمایش عکس فوری استفاده می کنیم؟

تست عکس فوری برای:

• اجزای UI مانند دکمه ها ، کارت ها ، صفحه ها و غیره
• تغییر در UI تصادفی قبل از حمل و نقل
• بررسی کد: به وضوح می توانید ببینید چه چیزی در یک مؤلفه تغییر کرده است
• توسعه سریعتر: نیازی به بررسی دستی همه چیز به صورت بصری نیست

مثل این است که یک “نگهبان” خودکار برای ساختار برنامه خود داشته باشید.

تنظیم محیط خود

اگر استفاده کردید npx react-native init برای ایجاد برنامه خود ، است ، در حال حاضر برای شما تنظیم شده است!

برای اطمینان ، خود را بررسی کنید package.json برای:

"scripts": {
  "test": "jest"
},
"devDependencies": {
  "jest": "...",
  "@testing-library/react-native": "...",
  "react-test-renderer": "..."
}

اگر چیزی از دست رفته است ، آنها را نصب کنید:

npm install --save-dev jest @testing-library/react-native react-test-renderer

یا

yarn add --dev jest @testing-library/react-native react-test-renderer

نمای کلی سریع: از چه ابزاری استفاده می کنیم؟

برای آزمایش اولیه عکس فوری ، ما عمدتاً از آن استفاده می کنیم است ، وت وانمود کنندهبشر

نوشتن اولین تست عکس فوری خود

بیایید بگوییم شما یک ساده دارید دکمه مؤلفه:

دکمه

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 10, backgroundColor: 'blue' }}>
      <Text style={{ color: 'white' }}>{title}</Text>
    </TouchableOpacity>
  );
}

حالا ، بیایید بنویسیم تست عکس فوری برای آن!

button.test.js

import React from 'react';
import renderer from 'react-test-renderer'; // this is react-test-renderer
import Button from './Button';

test('Button renders correctly', () => {
  const tree = renderer.create(<Button title="Click me" onPress={() => {}} />).toJSON();
  expect(tree).toMatchSnapshot();
});

اینجا چه اتفاقی می افتد؟

1. renderer.create() یک نسخه جعلی “ارائه شده” از مؤلفه شما ایجاد می کند.
2. .toJSON() آن را به یک شیء JavaScript ساده تبدیل می کند (نمایانگر ساختار).
3. expect(tree).toMatchSnapshot() خروجی را در a ذخیره می کند پرونده عکس فوری اولین بار

فایل عکس فوری به نظر می رسد (به طور خودکار تولید می شود):

button.test.js.snap

exports[`Button renders correctly 1`] = `

  
    Click me
  

`;

لازم نیست این پرونده را به صورت دستی ایجاد کنید – است ، آن را کنترل می کند!

چه اتفاقی می افتد که همه چیز تغییر کند؟

فرض کنید شما به طور تصادفی رنگ دکمه را از آبی به سبز تغییر دهید دکمه:

style={{ padding: 10, backgroundColor: 'green' }}

وقتی دویدید npm test، شوخی به شما خواهد گفت:

Snapshot test failed!

این به شما نشان می دهد چه چیزی تغییر کرد -دقیقاً مانند مقایسه جانبی “قبل و بعد”.

شما دو گزینه خواهید داشت:

• اگر این تغییر بود عمدا (شما خواسته آن سبز) ، شما می توانید بروزرسانی عکس فوری
• اگر این تغییر بود اشتباه، شما می توانید مؤلفه را برطرف کنید برای مطابقت با عکس فوری قدیمی.

نحوه بروزرسانی عکسهای فوری

اگر عمداً مؤلفه خود را تغییر دادید (و می خواهید نسخه جدید را بپذیرید) ، فقط اجرا کنید:

npm test -- -u

یا

yarn test -u

در -u می گوید پرچم است:

✅ “عکسهای فوری را با خروجی جدید به روز کنید.”

چه موقع از تست عکس فوری استفاده کنید (و در صورت عدم)

خوب برای:

• اجزای ساده (دکمه ها ، کارت ها ، نشان ها)
• اجزای UI قابل استفاده مجدد که اغلب تغییر نمی کنند
• تشخیص تغییرات غیر منتظره UI

خوب نیست:

• مؤلفه های تعداد زیادی تصادفی (به عنوان مثال ، رنگ های تصادفی ، شناسه های پویا)
• بسیار پویا مؤلفه ها (همیشه خروجی های مختلف)
• بسیار بزرگ و پیچیده مؤلفه ها (عکسهای فوری سخت می شوند)

🔵 قانون شست:

از آزمایش عکس فوری استفاده کنید اجزای UI کوچک و متوسط ​​و پایداربشر

بهترین روشها برای تست عکس فوری

اشتباهات مشترک مبتدی

پایان

تست عکس فوری یک است ابزار ساده اما قدرتمند برای به دست آوردن تغییرات UI غیر منتظره در برنامه React Native خود.

فقط با چند خط کد ، می توانید:

• ساختار مؤلفه خود را ضبط کنید
• وقتی چیزی تغییر می کند هشدار داده شود
• طرح برنامه خود را با اعتماد به نفس مرور و به روز کنید

به یاد داشته باشید:

• عکسهای فوری هستند یاراننه اثبات مطلقبشر
• همیشه تغییرات عکس فوری را مرور کنید با دقت
• کوچک را شروع کنید و اغلب تمرین کنید!

بازپرداخت سریع