Zorg ervoor dat de UserName-component de nieuwe gebruikersnaam weergeeft na een succesvolle indiening van het formulier.

Чтобы убедиться, что компонент UserName отображает новое имя пользователя после успешного сабмита формы, нужно проверить, что состояние компонента обновляется корректно и UI перерисовывается с новым значением.

Пример на React:

function UserName() {
  const [name, setName] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newName = e.target.elements.username.value;
    // имитация успешного сабмита, например, запрос к API
    setName(newName);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="username" type="text" />
        <button type="submit">Сохранить</button>
      </form>
      <p>Имя пользователя: {name}</p>
    </div>
  );
}

Для тестирования можно использовать React Testing Library, проверяя, что после сабмита в DOM появляется новое имя:

import { render, screen, fireEvent } from '@testing-library/react';
import UserName from './UserName';

test('отображает новое имя после сабмита', () => {
  render(<UserName />);
  const input = screen.getByRole('textbox', { name: /username/i });
  const button = screen.getByRole('button', { name: /сохранить/i });

  fireEvent.change(input, { target: { value: 'Иван' } });
  fireEvent.click(button);

  expect(screen.getByText(/Имя пользователя: Иван/)).toBeInTheDocument();
});

Таким образом, проверяется, что после успешного сабмита состояние обновляется и компонент отображает новое имя.