Компонент реквизит не обновляется в мелкой визуализации

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 установлена ​​в 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

Почему реквизиты модального компонента не обновляются?