组件道具未在浅渲染中更新

Question

我有一个付款组件，当我单击一个按钮时，它将把组件状态isOpen更新为true。这在实践中效果很好，但尝试通过酶对其进行测试时，不会更新道具。

该组件如下所示：

class CashPayment extends Component {
  state = {
    isOpen: false
  }

  toggleModal = () => {
    this.setState({ isOpen: true })
  }

  render() {

    return (
      <Mutation>
        {() => (
          <Fragment>
            <Button
              id="cash-payment-button"
              onClick={this.toggleModal}
            />

            <Modal
              id="confirm-payment-modal"
              isOpen={isOpen}
            >
              ...
            </Modal>
          </Fragment>
        )}
      </Mutation>
    )
  }
}

因此，单击#cash-payment-button应该切换状态isOpen，这将打开模式。

在测试中，我想检查模式isOpen的prop是否设置为true。但是由于某种原因，道具在测试中不会更新。但是，如果我在toggleIsOpen函数中进行控制台登录，则可以看到该函数被调用并更新状态。

我的测试是如此：

describe("Click Pay button", () => {
    it("Should open confirm modal", () => {

      Component = shallowWithIntl(
        <CashPayment bookingData={bookingData} refetchBooking={refetchBooking} />
      )
      .dive()
      .dive()

      const button = Component.find("#cash-payment-button")
        .props()
        .onClick()

      expect(Component.find("#confirm-payment-modal").prop("isOpen")).toEqual(true)
    })
  })

结果为：

CashPayment › Click Pay button › Should open confirm modal
    expect(received).toEqual(expected)
    Expected value to equal:
      true
    Received:
      false

为什么模态组件道具不更新？