← Усі задачіReact · Junior

Лічильник

Напишіть компонент Counter. Він показує число в елементі з data-testid="count" і має дві кнопки: - зменшує число на одиницю, + збільшує.

Початкове значення приходить у пропсі initial (за замовчуванням 0). Хуки (useState та інші) доступні без імпорту.

function Counter({ initial = 0 }) {
  // ...
  return null;
}

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (4)

render(<Counter />);
expect(screen.getByTestId('count').textContent).toBe('0');

render(<Counter />);
fireEvent.click(screen.getByRole('button', { name: '+' }));
fireEvent.click(screen.getByRole('button', { name: '+' }));
expect(screen.getByTestId('count').textContent).toBe('2');

render(<Counter />);
fireEvent.click(screen.getByRole('button', { name: '-' }));
expect(screen.getByTestId('count').textContent).toBe('-1');

render(<Counter initial={10} />);
fireEvent.click(screen.getByRole('button', { name: '+' }));
expect(screen.getByTestId('count').textContent).toBe('11');