使用 Vue Test Utils 测试 b-form-select

Question

如何使用 Vue Test Utils 选择此自定义 Bootstrap Vue 组件（或任何其他组件）？

我希望能够从组件中选择值，以及能够更改/选择不同的选项并获取其值。

假设我们有这个代码（来自 Vue Boostrap 文档）：

<template>
  <div>
    <b-form-select v-model="selected" class="mb-3">
      <b-form-select-option :value="null">Please select an option</b-form-select-option>
      <b-form-select-option value="a">Option A</b-form-select-option>
      <b-form-select-option value="b" disabled>Option B (disabled)</b-form-select-option>
      <b-form-select-option-group label="Grouped options">
        <b-form-select-option :value="{ C: '3PO' }">Option with object value</b-form-select-option>
        <b-form-select-option :value="{ R: '2D2' }">Another option with object value</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>

    <div class="mt-2">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null
      }
    }
  }
</script>

还有一些像这样的简单测试：

import { mount } from '@vue/test-utils'
import Component from './Component.vue'
import { BFormSelect } from "bootstrap-vue";

test('find', () => {
  const wrapper = mount(Component)

  wrapper.find('b-form-select') //does not work
  wrapper.find('select') //does not work
  wrapper.findComponent(BFormSelect) //does not work
})