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

Question

v-select我有一个使用 vue.js 和货币下拉列表的表单设置。我正在尝试创建一个单元测试以确保 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计算值。在单元测试中，我可以使用 find 方法来v-select返回元素，但因为它是一个 vue 组件而不是实际的<select>元素value，所以没有设置，这意味着我无法测试它。

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

这似乎是一个相当简单的测试，但我在文档或在线任何地方都找不到如何完成此操作的好示例。

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

Answer 1

我这样做了：

\n

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

\n

我的 Vue 模板代码如下所示：

\n

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

\n

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

\n

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

\n

请注意，我更喜欢更面向集成的 Jest 测试风格，因此我对页面内容而不是模型中的值进行断言，这是因为我觉得它提供了更好的覆盖范围。如果您更愿意仅测试模型中的值，那么您也许可以在 V-Select 本身的单元测试中找到示例。

\n