web-dev-qa-db-ja.com

Enterキーを押してフォームを送信し、react-testing-libraryで機能しない

説明：

ユーザーが「Enter」キーを押したときにフォームが送信されることをテストしようとしています。 Submitボタンを押したときのテストに合格していますが、フォームがキーボードで送信されることも確認したいと思います（convenienceおよびa11y）。

コード：

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();
});

これが CodeSandbox であり、必要なコードは最小限です。

reactjsformseventsjestjsreact-testing-library
5
jaypee

キーボードの表示/非表示をシミュレートするには、まず入力に焦点を当て、次に入力をシミュレートします。このように、onSubmitEditingイベントを発生させて、キーボードで押された送信ボタンをシミュレートできます。

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

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