تست اجزای React با استفاده از Jest و کتابخانه تست React

تست یک جنبه حیاتی اما اغلب نادیده گرفته شده در توسعه وب است. Jest می تواند به شما کمک کند کامپوننت های React خود را آزمایش کنید و برنامه های قابل اعتمادتری تولید کنید.

تست های نوشتاری می تواند خسته کننده و تکراری باشد. ممکن است احساس کنید زمان گرانبهایی را که ترجیح می دهید برای کار روی ویژگی ها استفاده کنید، تلف می کنید. با این حال، اگر می‌خواهید برنامه‌هایی را ارسال کنید که به آن‌ها اطمینان دارید، باید آزمایش‌هایی بنویسید.

آزمایش به شما امکان می دهد اشتباهات و اشکالاتی را که در غیر این صورت ممکن است برای کاربران ارسال کنید، پیدا کنید. بنابراین، تجربه کاربری برنامه شما را بهبود می بخشد و شما را از اشکال زدایی کد تولید نجات می دهد.

با استفاده از Jest و React Testing Library به راحتی می توانید تست ها را در React بنویسید.

چه چیزی را باید در React تست کنید؟

تصمیم گیری برای آزمایش می تواند دشوار باشد. در حالی که تست ها عالی هستند، نباید هر خط را در برنامه React خود آزمایش کنید. انجام این کار شما را با تست های شکننده ای مواجه می کند که با کوچکترین تغییری در اپلیکیشن شما شکسته می شوند.

در عوض، شما فقط باید پیاده سازی کاربر نهایی را آزمایش کنید. این به معنای آزمایش نحوه استفاده کاربر نهایی از برنامه شما به جای آزمایش عملکرد داخلی برنامه شما است.

علاوه بر این، اطمینان حاصل کنید که پرکاربردترین مؤلفه‌ها را در برنامه خود آزمایش می‌کنید، مانند صفحه فرود یا مؤلفه ورود به سیستم. همچنین مهم ترین ویژگی ها را در برنامه خود تست کنید. به عنوان مثال، اینها ممکن است ویژگی هایی باشند که پول به همراه داشته باشند، مانند ویژگی سبد خرید.

زمانی که تصمیم می گیرید چه چیزی را آزمایش کنید، یکی از مواردی که باید در نظر داشته باشید این است که هرگز عملکردی را که React خودش مدیریت می کند، آزمایش نکنید. به عنوان مثال، به جای آزمایش اعتبار props، می توانید از React PropTypes استفاده کنید.

تست کامپوننت دکمه

به یاد داشته باشید، شما فقط باید اجرای کاربر نهایی یک جزء را آزمایش کنید و نه عملکرد داخلی آن را. برای یک مؤلفه دکمه، این به معنای تأیید رندر آن بدون خرابی و نمایش صحیح است.

یک فایل جدید در پوشه src به نام Button.js ایجاد کنید و کد زیر را اضافه کنید.

function Button({value}) {
return (
<button>{value}</button>
)
}

export default Button


Button.js یک پایه به نام value را می پذیرد و از آن به عنوان مقدار دکمه استفاده می کند.

نوشتن اولین آزمون

یک برنامه Creative-react-app به همراه Jest و کتابخانه تست React از قبل نصب شده است. Jest یک کتابخانه تست سبک وزن با توابع تمسخر و ادعای داخلی است. با بسیاری از چارچوب های جاوا اسکریپت کار می کند. از سوی دیگر، React Testing Library، توابعی را ارائه می‌کند که به شما کمک می‌کند نحوه تعامل کاربران با مؤلفه‌ها را آزمایش کنید.

یک فایل جدید به نام Button.test.js در پوشه src ایجاد کنید. به‌طور پیش‌فرض، Jest فایل‌هایی را که پسوند .test.js دارند به‌عنوان فایل‌های آزمایشی شناسایی می‌کند و به‌طور خودکار آنها را اجرا می‌کند. گزینه دیگر این است که فایل های آزمایشی خود را به پوشه ای به نام __tests__ اضافه کنید.

برای ایجاد اولین تست کد زیر را در Button.test.js اضافه کنید.

import { render } from &apos@testing-library/react'
import Button from &apos../Button'

describe(&aposButton component&apos, () => {
test(&aposRenders the button component without crashing&apos, () => {
render(<Button />);
});
})


این تست ابتدا مشخص می‌کند که آزمایش در مورد استفاده از بلوک توصیف ارائه شده توسط Jest چیست. این بلوک برای گروه بندی تست های مرتبط مفید است. در اینجا، شما در حال گروه بندی تست ها برای مولفه Button هستید.

در داخل بلوک توصیف، شما اولین تست را در بلوک تست دارید. این بلوک رشته‌ای را می‌پذیرد که توضیح می‌دهد آزمایش باید چه کاری انجام دهد و یک تابع callback که انتظار را اجرا می‌کند.

در این مثال، آزمایش باید مؤلفه Button را بدون خرابی رندر کند. روش رندر از کتابخانه React Testing آزمایش واقعی را انجام می دهد. بررسی می کند که آیا مؤلفه Button به درستی ارائه می شود یا خیر. اگر این کار را انجام دهد، آزمون قبول می شود، در غیر این صورت شکست می خورد.

استفاده از نقش ها برای یافتن دکمه

گاهی اوقات می خواهید بررسی کنید که آیا عنصر نصب شده است یا خیر. متد screen یک تابع getByRole() دارد که می توانید از آن برای گرفتن یک عنصر از DOM استفاده کنید.

screen.getByRole(&aposbutton&apos)


سپس می توانید از عنصری که گرفته اید برای انجام آزمایش هایی مانند بررسی اینکه آیا در سند وجود دارد یا به درستی رندر شده است استفاده کنید.

getByRole() یکی از پرس و جوهایی است که می توانید برای انتخاب عناصر در یک جزء استفاده کنید. انواع دیگر پرس و جوها را در راهنمای «از کدام پرسش باید استفاده کنم» کتابخانه React Testing بررسی کنید. همچنین به غیر از نقش دکمه، اکثر عناصر معنایی HTML دارای نقش های ضمنی هستند که می توانید از آنها برای انجام پرس و جوهای خود استفاده کنید. لیست نقش ها را از اسناد MDN بیابید.

موارد زیر را به بلوک تست اضافه کنید تا رندر مؤلفه را تأیید کنید.

test(&aposRenders button without crashing&apos, () => {
render(<Button value="Sign up" />);
expect(screen.getByRole(&aposbutton&apos)).toBeInTheDocument()
});


تطبیق toBeInTheDocument() بررسی می کند که آیا عنصر دکمه در سند وجود دارد یا خیر.

انتظار داشته باشید که دکمه به درستی رندر شود

جزء Button یک مقدار prop را می پذیرد و آن را نمایش می دهد. برای اینکه به درستی رندر شود، مقداری که نمایش می دهد باید همان مقداری باشد که شما در آن ارسال کرده اید.

یک بلوک تست جدید ایجاد کنید و کد زیر را اضافه کنید.

test(&aposRenders button correctly&apos, () => {
render(<Button value="Login" />);
expect(screen.getByRole(&aposbutton&apos)).toHaveTextContent("Login")
})


توجه داشته باشید که هنگام استفاده از کتابخانه تست React نیازی به پاکسازی پس از آزمایش ندارید. در نسخه های قبلی، باید به صورت دستی پاکسازی را به این صورت انجام دهید:

afterEach(cleanup)


اکنون، کتابخانه آزمایشی پس از هر رندر، مؤلفه‌ها را به‌طور خودکار جدا می‌کند.

ایجاد تست های اسنپ شات

تا اینجا شما رفتار مولفه Button را تست کرده اید. تست های عکس فوری بنویسید تا بررسی کنید که آیا خروجی جزء ثابت باقی می ماند یا خیر.

تست های Snapshot خروجی فعلی را با خروجی ذخیره شده جزء مقایسه می کنند. برای مثال، اگر سبک یک جزء Button را تغییر دهید، تست عکس فوری به شما اطلاع می‌دهد. می توانید عکس فوری را برای مطابقت با مؤلفه تغییر یافته به روز کنید یا تغییرات سبک را لغو کنید.

هر زمان که بخواهید اطمینان حاصل کنید که رابط کاربری شما به طور غیرمنتظره ای تغییر نمی کند، تست های Snapshot بسیار مفید هستند.

تست Snapshot با تست های واحد متفاوت است، زیرا برای ایجاد عکس فوری باید کد از قبل در حال کار داشته باشید.

شما از متد renderer از بسته react-test-renderer npm استفاده خواهید کرد. پس برای نصب آن کد زیر را اجرا کنید.

npm install react-test-renderer


در Button.test.js، تست اسنپ شات را به صورت زیر بنویسید:

test(&aposMatches snapshot&apos, () => {
const tree = renderer.create(<Button value="Login" />).toJSON();
expect(tree).toMatchSnapshot();
})


هیچ عکس فوری برای مؤلفه Button وجود ندارد، بنابراین اجرای این آزمایش یک فایل عکس فوری در کنار فایل آزمایشی ایجاد می کند:

Button
└─── __tests__
│ │ Button.tests.js
│ └─── __snapshot__
│ │ Button.test.js.snap
│
└─── Button.js


اکنون، هنگامی که تست بعدی را اجرا می کنید، React عکس فوری جدیدی را که تولید می کند با عکس ذخیره شده مقایسه می کند.

برای اجزای پرکاربرد تست بنویسید

در این آموزش نحوه نوشتن تست های DOM و Snapshot در React با تست کامپوننت Button به شما آموزش داده شده است. نوشتن تست برای تمام اجزایی که ایجاد می کنید می تواند خسته کننده باشد. با این حال، این آزمایش‌ها در زمانی که برای اشکال‌زدایی کدهای قبلاً مستقر شده صرف کرده‌اید، صرفه‌جویی می‌کنند.

شما نیازی به پوشش 100 درصدی تست ندارید، اما مطمئن شوید که در حال نوشتن تست برای پرکاربردترین و مهم ترین اجزای خود هستید.

منبع مقاله