Appuyer sur Entrée pour soumettre le formulaire dans react-testing-library ne fonctionne pas

Question

La description:

J'essaye de tester qu'un formulaire se soumet lorsque l'utilisateur appuie sur la touche "Entrée". J'ai un test de réussite lorsque j'appuie sur le bouton Submit, mais je veux aussi m'assurer que le formulaire est soumis avec le clavier (commodité et a11y).

Code:

test("should submit when pressing enter", () => {
  const handleSubmit = jest.fn();
  const { getByLabelText } = render(<App handleSubmit={handleSubmit} />);
  const input = getByLabelText("Name:");

  fireEvent.change(input, { target: { value: "abc" } });
  fireEvent.keyPress(input, { key: "Enter", code: 13, charCode: 13 });

  expect(handleSubmit).toHaveBeenCalled();
});

Voici un CodeSandbox avec la quantité minimale de code nécessaire.

Answer 1

Pour simuler l'affichage/masquage du clavier, je me concentre d'abord sur la saisie, puis je simule la saisie. De cette façon, vous pouvez déclencher l'événement onSubmitEditing pour simuler le bouton d'envoi enfoncé sur un clavier.

import { fireEvent } from '@testing-library/react-native'

const input = getByTestId('input');
fireEvent.focus(input);
fireEvent.changeText(input, 'hello world')
fireEvent.submitEditing(input);