Component Testing & Accessibility

Component Testing & Accessibility ကို feature boundary, accessible interaction, behavior-focused tests, measured performance နဲ့ production failure handling တို့ဖြင့်စစ်ပါ။ Memoization ကိုခန့်မှန်းပြီးမထည့်ဘဲ profiler သို့ React Compiler feedback အပေါ်မူတည်ပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

Component Testing & Accessibility ကို feature boundary, accessible interaction, behavior-focused tests, measured performance နဲ့ production failure handling တို့ဖြင့်စစ်ပါ။ Memoization ကိုခန့်မှန်းပြီးမထည့်ဘဲ profiler သို့ React Compiler feedback အပေါ်မူတည်ပါ။

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Component Testing & Accessibility example ကို empty/loading/error states, keyboard-only interaction, slow network, rapid repeated events နဲ့ component unmount/remount cases ဖြင့်စမ်းပါ။ Browser console, React DevTools, tests နဲ့ profiler ကိုလိုအပ်သလိုအသုံးပြုပြီး behavior ကိုအတည်ပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

• Source of truth နဲ့ component boundary ကိုရှင်းပြနိုင်ခြင်း
• Keyboard နှင့် failure state ပါသော example ရေးနိုင်ခြင်း
• User-visible behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expect, test } from 'vitest';
import Counter from './Counter.jsx';

test('increments from an accessible button', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  await user.click(screen.getByRole('button', { name: /add/i }));
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

1 test passed

React Testing Library Introduction — Testing Library