React App - не может прочитать опору детей (становится неопределенным) во время тестирования с использованием Jest и Enzyme

Question

Я пытаюсь провести свои первые тесты для приложения React с использованием Jest и Enzyme. У меня есть компонент SignUpForm, который принимает дочерние элементы и отображает правильный, основываясь на его текущем значении состояния.

Пример:

if (children.length < currentStep) {
      return <Success />;
    }

Все работает хорошо, за исключением случаев, когда я пытаюсь выполнить тестирование для него. Это потому, что я получаю сообщение об ошибке за указание на дочернюю подпорку и говорю:

TypeError: Невозможно прочитать свойство 'length' с неопределенным значением

Это то, что я делаю в моем тесте сейчас:

it("Should render without crashing", () => {
    const component = shallow(<SignUpForm />);
    console.log(component);
  });

Answer 1

Вы хотите проверить сценарий, в котором нет дочерних элементов или они не определены, и это нормально. Все, что вам нужно сделать, это добавить еще одну проверку на наличие переменной children:)

if (!children || children.length < currentStep) {
      return <Success />;
}