Writing Tests

1// src/components/MyComponent/__tests__/MyComponent.test.tsx
2import { render, screen } from '@testing-library/react';
3import userEvent from '@testing-library/user-event';
4import { axe, toHaveNoViolations } from 'jest-axe';
5import { MyComponent } from '../MyComponent';
6
7expect.extend(toHaveNoViolations);
8
9describe('MyComponent', () => {
10  it('renders with default props', () => {
11    render(<MyComponent>Hello</MyComponent>);
12    expect(screen.getByText('Hello')).toBeInTheDocument();
13  });
14
15  it('has no accessibility violations', async () => {
16    const { container } = render(<MyComponent>Hello</MyComponent>);
17    const results = await axe(container);
18    expect(results).toHaveNoViolations();
19  });
20
21  it('supports keyboard navigation', async () => {
22    const user = userEvent.setup();
23    render(<MyComponent>Focusable</MyComponent>);
24    await user.tab();
25    expect(screen.getByText('Focusable')).toHaveFocus();
26  });
27});