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

【问题标题】：Testing b-form-select with Vue Test Utils使用 Vue Test Utils 测试 b-form-select
【发布时间】：2021-06-16 19:16:58
【问题描述】：

如何使用 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
})

【问题讨论】：

标签： vue.js bootstrap-vue vue-test-utils

【解决方案1】：

我刚刚学习测试 Vue 组件，我做了你尝试过的事情。对我来说这很有效：

const bFormSelect = wrapper.find('b-form-select')

我必须承认我的组件是用这个制作的：https://class-component.vuejs.org/

【讨论】：