شوخی – چگونه می توان تأیید کرد که یک عنصر در خروجی ارائه شده وجود ندارد

منابع

انواع نمایش داده شد

. نه

نه. سند tobeinthed

.tobenull ()

WaitforeLementToberemoved

زمان مبادله

.tothrow (خطا؟)

در انتظار

سند: روش queryselector ()

.not.toBeInTheDocument()

به عنوان مثال ، با توجه به انواع مستندات پرس و جو ،queryBy... بازگرداندن null اگر هیچ عنصر تطبیق یافت نشد. بنابراین ، ما می توانیم استفاده کنیم .not.toBeInTheDocument() ادعا کنید که عنصر با شناسه آزمون user-profile-icon در DOM ارائه نمی شود.

it('does not render the icon element when the "icon" prop is missing', () => {
  expect(screen.queryByTestId('user-profile-icon')).not.toBeInTheDocument();
});

toBeNull()

مثال فوق را می توان به شرح زیر بازنویسی کرد:

it('does not render the icon element when the "icon" prop is missing', () => {
  expect(screen.queryByTestId('user-profile-icon')).toBeNull();
});

اگر یک روش پرس و جو در صورت عدم یافتن عناصر خطایی ایجاد کند

روشهای پرس و جو getBy...با getAllBy...با findBy...وت findAllBy... هنگامی که آنها نتوانند عناصر پیدا کنند ، خطایی به وجود می آورند. بنابراین ما می توانیم استفاده کنیم .toThrow() برای تأیید اینکه عناصر خاصی ارائه نمی شوند.

به عنوان مثال ، برای تأیید اینکه یک عنصر با متن “موجود” در خروجی رندر وجود ندارد:

beforeEach(() => {
  render();
});

...

it('query methods throw when elements are not found', () => {
  expect(() => screen.getByText('Not Present')).toThrow();
});

در بعضی موارد ، ممکن است بخواهیم تأیید کنیم که وقتی یک عنصر در DOM نباشد ، ادعا شکست می خورد. این کار با استفاده از .toThrow()اگرچه کمتر متداول است و به طور معمول برای بررسی های غیبت عمومی توصیه نمی شود.

به عنوان مثال ، ما می توانیم استفاده کنیم querySelector() برای انتخاب یک عنصر توسط کلاس CSS آن و ادعا کنید که تماس .toBeInTheDocument() روی یک عنصر غیر موجود (یعنی NULL) خطایی را به وجود می آورد. به عنوان مثال:

describe('

هنگامی که کتابخانه آزمایش ممکن است DOM را فوراً به روز نکند

• به روزرسانی های حالت ناهمزمان
• به روزرسانی های رد شده یا پرتاب
• به روزرسانی های حالت پس از ارائه مجدد
• انتقال و انیمیشن ها
• رویدادهای خارجی محرک است
• …

به روشهای async مراجعه کنید