4

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

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

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

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

4

1 回答 1

0

我这样做了：

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 测试风格，因此我对页面内容而不是模型中的值进行断言，这是因为我觉得它提供了更好的覆盖率。如果您更喜欢只测试模型中的值，那么您可以在 V-Select 本身的单元测试中找到一个示例。

于 2021-03-01T10:53:01.120 回答