اختبار الوحدة: اختبار واجهة المستخدم

خمسة أسئلة عن هذه الوحدة. أجب عنها كلها، ثم شاهد نتيجتك وسبب صحة كل إجابة أو خطئها.

يعرض النموذج أخطاء التحقّق في <p role="alert">Amount must be greater than zero</p>. أيّ query هو الأنسب؟

screen.getByRole('alert')
container.querySelector('.error-text')
screen.getByTestId('amount-error')
screen.getByDisplayValue('Amount must be greater than zero')

يُحلّ load بالقيمة { Ben: -500 }. يفشل هذا الاختبار بالرسالة “Unable to find an element with the text”. ما الإصلاح؟

JSX

test('shows balances', () => {
  render(<BalancePanel loadBalances={load} />);
  expect(screen.getByText('Ben owes $5.00')).toBeInTheDocument();
});

لفّ render داخل waitFor.
ارفع مهلة الاختبار في Vitest.
اجعل الاختبار async واستخدم expect(await screen.findByText('Ben owes $5.00')).toBeInTheDocument().
استخدم screen.queryByText('Ben owes $5.00') بدلًا من ذلك.

تستخدم اختبارات المكوّنات MSW مع server.listen({ onUnhandledRequest: 'error' }). إعادة هيكلة تغيّر عن غير قصد الـ URL في الطلب من /groups/:id إلى /group/:id. ماذا يحدث؟

تنجح الاختبارات، لأن MSW يجيب عن كل طلب بـ 200 فارغ.
تفشل الاختبارات، لأن الطلب لا يطابق أي معالِج، والطلبات غير المعالَجة أخطاء.
يمرّر MSW الطلب بصمت إلى الشبكة الحقيقية.
تتخطّى Vitest الاختبارات المتأثّرة.

أيّ استخدام لـ waitFor مناسب؟

await waitFor(() => user.click(screen.getByRole('button', { name: 'Save' })))
await waitFor(() => screen.findByText('Saved'))
await waitFor(() => {})
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1))

في ExpenseList مربّع اختيار “Hide settled”. ما أفضل اختبار له؟

انقر مربّع الاختيار بـ user-event وأكّد أيّ عناصر القائمة ما زالت على الشاشة.
أكّد أن useState استُدعي بالقيمة false في البداية.
التقط snapshot قبل النقر وبعده.
استدعِ المكوّن كدالة وافحص الـ JSX المُعاد.

5 أسئلة بلا إجابة