← Alle AufgabenReact · Junior

Begrüßung mit Eingabefeld

Schreib eine Komponente Greeting mit einem Eingabefeld mit dem Label Name (über <label> oder aria-label) und einem Absatz darunter.

Der Absatz zeigt Hello, <name>!, wobei der Name der getippte Text ohne Leerzeichen an den Enden ist. Ist das Feld leer oder enthält nur Leerzeichen, zeigt der Absatz Hello, stranger!.

function Greeting() {
  // ...
  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(<Greeting />);
expect(screen.getByText('Hello, stranger!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'Anna' } });
expect(screen.getByText('Hello, Anna!')).toBeTruthy();

render(<Greeting />);
fireEvent.change(screen.getByLabelText('Name'), { target: { value: '  Bob  ' } });
expect(screen.getByText('Hello, Bob!')).toBeTruthy();

render(<Greeting />);
const input = screen.getByLabelText('Name');
fireEvent.change(input, { target: { value: 'Anna' } });
fireEvent.change(input, { target: { value: '' } });
expect(screen.getByText('Hello, stranger!')).toBeTruthy();
expect(input.value).toBe('');