Create React Testing Library Test Suite

Create a complete React Testing Library test suite for [COMPONENT_NAME] with the following specifications:

Requirements

• Component name: [COMPONENT_NAME]
• Component type: [Button/Form/Data Display/Modal/Layout]
• Props to test: [PROP_1], [PROP_2], [PROP_3]
• User interactions: [CLICK/TYPE/SUBMIT/DRAG/HOVER]
• Async behavior: [API calls/Loading states/Delayed rendering]
• Context/Providers needed: [Theme/Router/Query/Redux/Auth]
• API endpoints to mock: [ENDPOINT_1], [ENDPOINT_2]
• Accessibility requirements: [WCAG level/Screen reader/Keyboard nav]
• Test runner: [Jest/Vitest]

Deliverables

Generate complete test code with:

Test file structure for [COMPONENT_NAME].test.tsx:

• Import statements for render, screen, userEvent, component
• describe() block with component name
• beforeEach/afterEach setup and teardown
• Individual test cases with clear descriptions

Basic rendering tests:

• Verify component renders with default props
• Check for expected text/labels using screen.getByRole()
• Use accessibility-focused queries (getByRole, getByLabelText)
• Test conditional rendering based on props

User interaction tests:

• Setup userEvent with userEvent.setup()
• Test [USER_INTERACTIONS] using await user.click/type/etc
• Verify callback functions are called with jest.fn()
• Assert state changes after interactions

Form testing if applicable:

• Type into form fields with proper labels
• Submit form and verify onSubmit payload
• Test validation errors
• Test disabled/enabled states

Async/Loading tests:

• Test loading states appear initially
• Use findBy* queries for async content
• Verify data appears after API calls
• Test error states

API mocking with MSW:

• Setup MSW server with handlers for [ENDPOINTS]
• Mock successful responses with realistic data
• Mock error responses for error handling tests
• Setup beforeAll/afterEach/afterAll server lifecycle

Custom render function if providers needed:

• Wrapper component with [PROVIDERS]
• Custom renderWithProviders() helper
• Export for reuse across tests

Accessibility tests:

• Install and configure jest-axe
• Run axe scanner on rendered component
• Assert no accessibility violations
• Test keyboard navigation if interactive

Output complete, production-ready tests following RTL best practices.