← Wszystkie zadaniaReact · Junior

Licznik

Napisz komponent Counter. Pokazuje liczbę w elemencie z data-testid="count" i ma dwa przyciski: - zmniejsza liczbę o jeden, a + zwiększa.

Wartość początkowa przychodzi w propsie initial (domyślnie 0). Hooki (useState i inne) są dostępne bez importu.

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

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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');