Testing BootstrapVue Collapse

I've isolated this from a larger application and put the code on Github.

I have a simple Vue component that is working as expected in the browser:

<template>
  <div id="app">
    <div>
      <b-button v-b-toggle="'my-collapse'" id="open" class="when-closed">Open</b-button>
      <b-collapse id="my-collapse">
        <b-card>
          <b-button v-b-toggle="'my-collapse'" id="close">Close</b-button>
          <p class="card-text">Collapse contents Here</p>
        </b-card>
      </b-collapse>
    </div>
  </div>
</template>

There is a button that shows the collapsed content. When that button is clicked, it is hidden and the now-visible collapsed content contains a button that will close the collapsed content and the button to open reappears. It works as expected, but I can't get this test to pass:

  test('list items contain an info button that toggles the description', async() => {
    let openButton = wrapper.find("#open")
    let collapsible = wrapper.find("#my-collapse")
    expect(collapsible.element).not.toBeVisible()
    await openButton.trigger("click")
    expect(collapsible.element).toBeVisible()

    // FAIL
    let closeButton = wrapper.find("#close")
    await closeButton.trigger("click")
    expect(collapsible.element).not.toBeVisible()
  })

The final expect, after triggering the click on the close button seems to be getting Bootstrap's transitional, collapsing state, as explained here, i.e.:

<div class="collapse show collapsing" id="my-collapse" style="height: 0px; display: block;" />

This is all new to me. I've tried adding listeners for Bootstrap's and Bootstrap Vue's events (hidden.bs.collapse and bv::collapse::state) and running my assertion in a handler, but no luck.

I'm new to Vue and fairly inexperienced w/ Javascript. Thanks in advance for any pointer.