Блог

У меня есть функциональный компонент, как показано ниже. Когда срабатывает кнопка Cta, она делает запрос к api, и если ответ успешен, состояние setFormsend изменяется на true.

 export const FormSend: React.FC<IProps> = (props) => {
  const [message, setMessage] = useReducer(
    (state: any, newState: any) => ({ ...state, ...newState }),
    new ISendMessageModel()
  );
  const [formSend, setFormSend] = useState<boolean>(false);
  const [formSendError, setFormSendError] = useState<boolean>(false);
  const [
    errors,
    validation,
    isGlobalValidation,
    triggerValidation,
  ] = useValidationErrors(serverModel, message);
  const [loading, setLoading] = useState<boolean>(false);

  const sendForm = async (evt: MouseEvent<HTMLAnchorElement>) => {
    setLoading(true);
    const isFormValid: boolean = triggerValidation();
    if (!isFormValid) {
      if (document.querySelectorAll(".error-block").length > 0) {
        scrollToFirstElement("error-block");
      }
      setLoading(false);
      return;
    }
    sendRequest();
  };
  const sendRequest = async () => {
    const formModel: ISendMessage = message;
    const response: AxiosResponse = await sendMessageAPI.sendMessage(formModel);
    if (response amp;amp; response.status === 200) {
      setFormSend(true);
      setLoading(false);
    } else {
      setFormSend(false);
      setFormSendError(true);
      setLoading(false);
    }
  };
  return (
    <div className="grid-content grid-content-3 col-md-6 mt-45">
      <Cta
        text="Senden"
        colorClass="color-cta-3"
        loading={loading}
        handleClick={sendForm}
        fullWidth={true}
      />
    </div>
  );
};
 

Я хочу поиздеваться над этим функциональным компонентом. До сих пор я реализовал приведенный ниже код.

 it("check return value", () => {
  const [formSend, setFormSend] = React.useState();

  const [isFetching, setFetching] = React.useState();
  reactMock.useState = setHookState({
    formSend: false,
    isFetching: false,
  });

  let wrapper = shallow(<FormSend />);

  wrapper.find("Cta").simulate("click");

  expect(setFormSend).toHaveBeenCalledTimes(1);
  console.log(wrapper.debug());
});
 

Однако это приводит к ошибке Недопустимого вызова крючка. Крючки могут вызываться только внутри тела компонента функции. Кроме того, я не уверен, что нахожусь на правильном пути. Как это возможно, чтобы имитировать щелчок Cta, а затем предположить, что api возвращает код состояния 200 и устанавливает значение setFormSend в true?