udemy testing react library

Testing React Library#

درحالت کلی ما 4 نوع تست داریم:

  1. Unit tests

تست بخش ب بخش کد های هر صفحه یا کامپوننت

  1. Integration tests

تست چند فانکشن یا کامپوننت ک در ارتباط با یکدیگر هستند.

  1. Functional tests

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

  1. Acceptance / End-to-end (E2E) tests

این بخش توسط نرم افزار هایی مثل Cypress و Selenium قابل اجرا می باشد ک ب مرورگر احتیاج دارد و در حوزه کاری React testing library نمی باشد.

🎉 مورد 3 بهتر از مورد 1 است ولی در حالت کلی شبیه ب هم هستند.

مزایا و معایب مورد 3

  1. مورد 3 رفتار های برنامه را تست میکند و این باعث می شود ک اگر بعدا تست ها را تغییر دهیم، باز هم تست ها pass می شوند

  2. همچنین تست ها بیشتر شبیه ب رفتار های user می باشد

  3. در حالت کلی debug کردن در این حالت سخت است

مزایا و معایب مورد 1

  1. خیلی سریع می توان خطا ها را پیدا کنیم و رفع کنیم

  2. خیلی شبیه ب رفتار های user نیست و بعضی وقت ها تست ها شکل افراطی دارند

  3. اگر آن بخش را تغییر دهیم، امکان fail شدن تست ها خیلی زیاد است.

🎉 بهتر است ک از query هایی ک خیلی خاص تر هستند برای انتخاب المان ها استفاده کنیم:

const linkElement = screen.getByRole("link", {name: /learn react/i});
expect(linkElement).toBeInTheDocument();

ک می توان تمامی role های پیش فرض تمام تگ های html را از سایت زیر پیدا کرد و همچنین می توان توسط ویژگی role، رول هر تگ را تغییر داد:

tag role

همچنین می توان از لینک زیر ترتیب query های مهم را در react-testing-library مشاهده کرد:

testing queries

🎉 اگر role المانی را نمی دانیم، کافیست یک تست ساده برای آن بنویسیم با getByRole و در کنسول می توان role آن را دید.

🎉 هنگامی ک ما کد هایمان را commit می کنیم، testing library متوجه می شود و هنگام تست کردن، تست های قبلی را دوباره اجرا نمی کند.

Queries and test tools#

screen.getByRole("button", {name: "mamad"}): هر گاه بخواهیم المانی را از صفحه انتخاب کنیم، میتوانیم از این query ها استفاده کنیم ک لینک آن در بالا موجود است.

fireEvent.click(colorButton): برای زمانی ک میخواهیم رفتار کاربر را شبیه سازی کنیم، استفاده می شود ک شامل تمام رویداد ها می باشد.

🎉 بهتر است بجای fireEvent از userEvent استفاده شود ک ابتدا باید آن را ادد کرد:

import User from "@testing-library/user-event";
User.click(colorButton)

🎉 توسط لینک زیر می توان لیست تمام متد های مربوط ب dom و expect را مشاهده کرد:

jest dom

toBeEnabled(): یعنی انتظار داریم ک المان ما enable باشد.

toBeChecked(): یعنی انتظار داریم ک المان ما check شده باشد ک برای radio و checkbox ها کاربرد دارد.

not.toBeChecked(): همان بالایی می باشد اما با not مشخص می کنیم ک چک نشده باشد ک not برای همه کوئری ها مورد استفاده قرار می گیرد.

toBeDisabled: یعنی انتظار داریم ک المان ما disable باشد.

toHaveStyle({color: "blue"}): یعنی انتظار داریم ک المان ما استایل هایی ک درون این متد تعریف میکنیم را داشته باشد.