← Alle AufgabenReact · Junior

Zähler

Schreib eine Komponente Counter. Sie zeigt eine Zahl in einem Element mit data-testid="count" und hat zwei Buttons: - verringert die Zahl um eins und + erhöht sie.

Der Anfangswert kommt in der Prop initial (standardmäßig 0). Hooks (useState und andere) sind ohne Imports verfügbar.

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

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

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