Блог

Главная - Вопросы по программированию - Как проверить, что метод родительского компонента был вызван из обратного вызова дочернего компонента с помощью Jest?

Как проверить, что метод родительского компонента был вызван из обратного вызова дочернего компонента с помощью Jest?

#reactjs #callback #jestjs #graphql #enzyme

Вопрос:

Это родительский компонент updateFindingStatus , у которого есть метод, ответственный за вызов мутации graphql:

 export default function ActionBox() {

  const { markFindingAsFixed } = findingMutations;

  const [markFindingAsFixedMutation] = useMutation(markFindingAsFixed, {
    onCompleted(data) {
      const updatedStatus = data.markFindingAsFixed.workflowStatus;
      handleToastOpen();
    },
  });

  const updateFindingStatus = () => {
    console.log("Function Invoked");
    markFindingAsFixedMutation({
      variables: {
        input: findingID,
      },
    });
  };

  return (
      <div>
        <TakeActionMenuButton updateFindingStatus={updateFindingStatus} />
      </div>
  );
}

Это дочерний компонент, который обладает свойством updateFindingStatus обратного вызова метода с тем же именем в родительском компоненте

 export function TakeActionMenuButton({ updateFindingStatus }: TakeActionMenuButtonProps) {

  const takeFindingAction = () => {
    updateFindingStatus();
  };

  return (
    <>
          <Button
            onClick={takeFindingAction}
          >
            MARK AS FIXED
          </Button>
    </>
  );
}

И это определение типа для TakeActionMenuButtonProps :

 export type TakeActionMenuButtonProps = {
  updateFindingStatus: Function;
};

Я использую Enzyme и Jest для тестирования своих компонентов изолированно с помощью shallow рендеринга. Мой вопрос в том, как мне проверить, что updateFindingStatus метод в родительском был вызван при нажатии кнопки в дочернем?

Комментарии:

1. При тестировании дочерний элемент утверждает, что вызывается переданный обратный вызов. При тестировании родителя издевайтесь над дочерней кнопкой, чтобы использовать шпиона для onClick обработчика, и утверждайте, что был вызван шпион.

2. Спасибо за комментарии, я понимаю, что первая часть утверждает, что вызывается переданный обратный вызов. Не могли бы вы поделиться примерным фрагментом кода для тестирования родительского компонента?

Метки: ,