无法读取未定义的 属性 'displayName'。 React+Jest+酶

Question

我正在渲染一个使用 useEffect 钩子的反应组件 App.tsx。在 useEffect 内部，它进行异步调用更新 App.tsx 中定义的状态 delivery。第一次渲染时，delivery 未定义，但在下次重新渲染后，它被定义了。

const App = () => {
  const [delivery, setDelivery] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setup()
  }, [])

  const setup = async () => {
    try {
      const response = await someAsyncCall()
      setDelivery(response)    
      setLoading(true)
    /// Other functionality
    } catch (err) {
      console.log(err)
    }finally{
        setLoading(false)
    }
    
  }
  return (
      <>
      {loading? <div>Loading!!</div>
        : <div>App has loaded with {delivery.displayName} {delivery.id}</div>  
    }
      </>
  )
}

如何编写单元测试以使其以正确的值重新呈现？现在我得到 Uncaught [TypeError: Cannot read property 'displayName' of undefined]

我写的单元测试：

describe('test', ()=>{
    it("mounts", ()=>{
       const wrapper =  mount(<App />)
    })
})

关于如何重新渲染有什么想法吗？我看了wrapper.update()可以用。我想知道怎么做？

Answer 1

这不应该解决问题吗？

return (
  <>
    {loading || !delivery ? <div>Loading!!</div>
      : <div>App has loaded with {delivery.displayName} {delivery.id}</div>  
        }
  </>
)