在React中设置数据后如何更新快照

Question

我正在研究React中的单元测试。我被困在这个地方。我有组件ShipmentData，它在componentDidMount上设置数据。在ShipmentData组件中设置数据后，我正在尝试更新快照。在该组件之前返回null。

我的ShipmentData文件：

const ShipmentData = () =>  {
  const [data,setData] = useState([])
  useEffect( () => {
    setData(props.data)
  },[props.data]);
  if(data.length===0) return null;
  return (
    <div className="App">
      <h1 className="testing">{data.text}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我想在快照中匹配类testing的文本应等于“ Testing in react”；

我的测试文件：

it('Test ', async () => {


    const component = renderer.create(<ShipmentDetails />);
    component.setProps({ data : { text: "Testing in react" } });
    const instance = component.getInstance();
    await instance.componentDidMount();
    console.log(instance)
});

我无法获取实例并检查文本是否相等。我也想更新快照。如果组件不为空