Отправка формы модульного теста с данными с использованием библиотеки реагирующего тестирования - PullRequest
Новая
       70

Отправка формы модульного теста с данными с использованием библиотеки реагирующего тестирования

0 голосов
/ 01 мая 2020

У меня есть реагирующий компонент с формой. Я хочу провести модульное тестирование (используя jest и RTL), если форма будет отправлена ​​с правильными данными. Вот мой метод тестирования компонентов и модулей:

Компонент: 

class AddDeviceModal extends Component {
  handleOnSave(event) {
    const { deviceName } = event.target;
    const formData = {
      deviceName: deviceName.value,
    };
    this.props.onSave(formData);
  }

  render() {
    return (
      <Form onSubmit={this.handleOnSave}>
        <Form.Label>Device Name</Form.Label>
        <Form.Control name="deviceName" placeholder="Device Name" required />
        <Button type="submit">Save Device</Button>
      </Form>
    );
  }
}

Модульный тест: 

it("Test form submit and validation", () => {
  const handleSave = jest.fn();
  const props = {
    onSave: handleSave,
  };
  render(<AddDeviceModal {...props} />);
  const deviceNameInput = screen.getByPlaceholderText(/device name/i);
  fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
  fireEvent.click(getByText(/save device/i));
});

Однако в handleOnSave() я получаю сообщение об ошибке, поскольку deviceName равно undefined. По некоторым причинам он не может получить значение текстового поля из event.target. Я делаю что-то не так в приведенном выше коде? Нужна помощь в устранении этой проблемы.

1 Ответ

1 голос
/ 01 мая 2020

Проблема в том, что вы пытаетесь получить доступ ко входу напрямую из event.target. Вы должны получить к нему доступ с event.target.elements вместо: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements. 

function handleOnSave(event) {
  event.preventDefault();
  const { deviceName } = event.target.elements;
  const formData = {
    deviceName: deviceName.value
  };

  // this will log the correct formData even in tests now
  console.log(formData);
  this.props.onSave(formData);
}

И вот ваш тест: 

it("Test form submit and validation", () => {
  const { getByPlaceholderText, getByText } = render(<App />);
  const deviceNameInput = getByPlaceholderText(/device name/i);

  fireEvent.change(deviceNameInput, { target: { value: "AP VII C2230" } });
  fireEvent.click(getByText(/Save Device/i));
});

Я создал коды и ящик, где вы можно увидеть это в действии: https://codesandbox.io/s/form-submit-react-testing-library-45pt8?file= / src / App. js

...