REACT＆＃x2B;玩笑测试状态的使用效应变化

Question

因此，我在 stackover flow答案，但是有些不同。我有一个反应组件，它具有两个使用效果钩。首次使用一种使用效果钩，而另一种使用该使用效果挂钩更改中的依赖性。我尝试嘲笑GetDelivery，但它来自应用程序中定义的自定义挂钩。

// app.tsx

const App = () => {
  const [deliveryType, setDeliveryType] = useState([])
  const { DeliveryStatusService } = useServices()
  const deliveryStatusService = new DeliveryStatusService()
  const { deliveryId } = useParams()

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

  useEffect(() => {
    if (deliveryType) {
      console.log("DeliveryType is Set")
    }
  }, [deliveryType])

  const setup = async () => {
    const response = await deliveryStatusService.getDelivery(deliveryId) // this call comes from custom hook and external service
    setDeliveryType(response)
  }

  return (
    <>
      <div>{!deliveryType ? <div>Render Loading</div> : <div>Data loaded with {deliveryType}</div>}</div>
    </>
  )
}

我试图按照上述文章中的规定进行嘲笑，如下所述，请使用开玩笑和酶，但是如果我console.log（wrapper.debug），我仍然会得到dender> Render lade loading而不是加载{deliveryType}的数据。

我尝试这样嘲笑它：

const getDelivery = jest.fn()
const DeliveryStatusService = jest.fn().mockImplementation(() => ({
  getDelivery,
}))

it('mock getDelivery', () => {
  const wrapper = mount(<ServiceProvider services={{DeliveryStatus}}>
                         <App />
                        </ServiceProvider>
  getDelivery.mockReturnValue(
  Promise.resolve(
    ... dummyData
  ),
)
await act(flushPromises)

wrapper.update()

await act(flushPromises)
console.log(wrapper.debug())

console.log（wrapper.debug（））产生以下输出：

<ServiceProvider services={{...}}>
        <App>
          <div>
            <div>
              Render Loading
            </div>
          </div>
        <App>
 </ServiceProvider>

我不是正确模拟了，这样我就永远不会加载data已加载 div div div ？