Показати й сховати текст

Напишіть компонент ToggleText, який отримує пропс text. Спочатку текст прихований, а єдина кнопка має напис Show.

Натискання показує текст і змінює напис на Hide, наступне натискання знову ховає текст.

function ToggleText({ text }) {
  // ...
  return null;
}

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

Тести (3)

render(<ToggleText text="Secret" />);
expect(screen.queryByText('Secret')).toBe(null);
expect(screen.getByRole('button').textContent).toBe('Show');

render(<ToggleText text="Secret" />);
fireEvent.click(screen.getByRole('button'));
expect(screen.getByText('Secret')).toBeTruthy();
expect(screen.getByRole('button').textContent).toBe('Hide');

render(<ToggleText text="Secret" />);
fireEvent.click(screen.getByRole('button'));
fireEvent.click(screen.getByRole('button'));
expect(screen.queryByText('Secret')).toBe(null);
expect(screen.getByRole('button').textContent).toBe('Show');