React组件测试：如何为InputWithLabel设置children属性值？

你的InputWithLabel组件中，children是用来渲染<label>标签的内容，所以需要传入合法的React节点，而非空数组或无效对象数组，具体可以这么设置：

常用的有效传值方式 #

• 直接传字符串（最常用，符合label的使用场景）：

  const inputWithLabelProps={
      id:"search",
      value:"React",
      isFocused:true,
      onInputChange:jest.fn(), // 注意这里要调用jest.fn()生成mock函数，不是直接写jest.fn
      children: "搜索" // 这里传字符串作为label的显示文本
  }
  

• 传单个React元素：

  children: <span className="label-text">搜索</span>
  

• 传带key的React节点数组（如果需要多个子元素）：

  children: ["搜索", <span key="suffix">框</span>]
  

为什么之前的空数组无效？ #

当你传入空数组[]时，React会渲染出空的<label>标签，看不到实际内容，自然达不到测试验证组件渲染的目的。而对象数组（比如[{text: '搜索'}]）不是合法的React节点，React无法直接渲染，所以会报错或无效果。

内容的提问来源于stack exchange，提问作者grojas123