Testing b-form-select with Vue Test Utils

How is it possible to select this custom Bootstrap Vue component (or any other) with Vue Test Utils?

I would like to be able to select the value from the component, as well as be able to change/select to a different option and get its value as well.

Imagining that we have this code (from Vue Boostrap documentation):

<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></strong></div>
  </div>
</template>

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

And some simple test like this:

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
})

from Recent Questions - Stack Overflow https://ift.tt/3vuEXIM
https://ift.tt/eA8V8J