如何测试 vue.js v-select 组件的值答案

【问题标题】：How to test value of vue.js v-select component如何测试 vue.js v-select 组件的值
【发布时间】：2019-04-16 22:40:39
【问题描述】：

我有一个使用 vue.js 和 v-select 的表单设置，用于货币下拉菜单。我正在尝试创建一个单元测试以确保将 v-select 的当前值设置为计算值 price_currency

这里是选择器的vue代码

<v-select
 name="price_currency"
 :value="price_currency"
 @input="value => this.updateValue('price_currency', value)"
 :options="currencies"
 v-validate="validate.select"
 :selectOnTab="true">
</v-select>

:value 设置为 price_currency，这是一个计算值。在单元测试中，我可以在 v-select 上使用 find 方法，它会返回元素，但是因为它是一个 vue 组件而不是实际的 <select>，所以 value 元素没有设置，这意味着我不能测试它。

如何为上述v-select 编写单元测试，以确认该字段设置为price_currency 的计算值？此外，我想测试当price_currency 更新时，v-select 上的值也会更新，但很可能一旦我看到一个测试值的示例，其余的就会到位。

这似乎是一个相当简单的测试，但我在文档或在线的任何地方都找不到一个很好的例子来说明如何做到这一点。

对于我的单元测试，我使用的是 VueTestUtils 和 Jest。

【问题讨论】：

你真的需要一个单元测试吗？难道你不能在本地浏览器中测试它并相信它以后可以工作吗？我的意思是，这并不是你的应用程序中真正需要测试的脆弱部分。此外，所有 Vue 组件都变成了常规的 HTML 元素，所以是的，它实际上是一个常规的 html 输入字段，假设您的测试人员完全处理了 Vue 项目。我建议运行您的项目并在浏览器中打开检查器以查看 Vue 输出的 html 类型。
最有可能，使用:value将不会更新price_currency @选择更新时。你应该使用v-model
正如 A. Lau 所说，您应该使用 vue-model 以使其与值保持同步。
这个我没提，但是select其实是另一个视图的子视图。这就是为什么不使用 v-model 的原因。在输入上调用的 updateValue() 方法将发出选择的值。现在我认为选择不需要在孩子身上进行测试。相反，父级中的测试将覆盖它，因为这是实际设置值的地方。但是我仍然需要测试 $emit 事件发生的 select 中的值何时发生变化，并且我不知道如何在不知道该值的情况下执行此操作。
您可能想看看如何通过浏览器测试来做到这一点：stackoverflow.com/questions/51163562/…

标签： javascript vue.js jestjs vue-test-utils v-select

【解决方案1】：

我这样做了：

expect(wrapper.find('#selectCustomerCountry .selected-tag').text()).toEqual('lorem')

这就是我的 Vue 模板代码的样子：

<v-select v-bind:class="{'input--has-error': errors.has('country')}" class="select-field input--full v-select" id="selectCustomerCountry"
          name="country"
          v-if="useCountrySearch"
          v-model="foundCountry"
          :filterable="false"
          :options="countries"
          label="name"
          :onSearch="onSearch"
          v-validate:country="'required'">
    <template slot="option" slot-scope="option">
        <span class="v-select__label">{{ option.name }}</span>
        <br />
        <span class="v-select__label--small">{{ option.continent.name }}</span>
    </template>
    <span slot="no-options">Type at least 3 characters...</span>
</v-select>

这就是当我挂载页面并调用 wrapper.html() 时呈现的 HTML 的样子，在它已经选择了一个名为 lorem 的选项之后：

<div dir="auto" class="dropdown v-select select-field input--full v-select single searchable" id="selectCustomerCountry" name="country">
  <div class="dropdown-toggle">
    <div class="vs__selected-options"><span class="selected-tag">
            lorem
           <!----></span> <input type="search" autocomplete="off" role="combobox" aria-label="Search for option" class="form-control"></div>
    <div class="vs__actions"><button type="button" title="Clear selection" class="clear" style=""><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
      <div class="spinner" style="display: none;">Loading...</div>
    </div>
  </div>
  <transition-stub name="fade">
    <!---->
  </transition-stub>
</div>

请注意，我更喜欢面向集成的 Jest 测试风格，因此我对页面内容而不是模型中的值进行断言，这是因为我觉得它提供了更好的覆盖率。如果您更喜欢只测试模型中的值，那么您可以找到一个示例 in the unit tests of V-Select itself。

【讨论】：