React App - 使用 Jest 和 Enzyme 进行测试时无法读取孩子的道具（变得未定义）

Question

I am trying to do my first tests for the React application using Jest and Enzyme. I have a component SignUpForm which takes children and render the correct one based on its current state value.

Example:

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

Everything works fine except when I try to do test for it. This is because I am getting error for pointing at the children prop and saying:

TypeError: Cannot read property 'length' of undefined

This is what I am doing in my test for now:

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

Answer 1

You want to test for the scenario where there is no children at all or undefined and that's fine. All what you need to do is to add one more check for the existence of the children variable :)

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