使用 vue-test-util 更改 v-select 的选定选项

Question

我正在尝试测试使用 vuetify 构建的组件。为此，我正在使用 vue-test-utils。我的目标是在 v-select 字段中执行更改，并断言执行了突变。这是我的代码：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs6>
          <v-subheader>Standard</v-subheader>
        </v-flex>
        <v-flex xs6>
          <v-select
            :items="items"
            v-model="e1"
            label="Select"
            single-line
          ></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

当我设置数据时，第一次测试没问题：

componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)

我现在想更改我尝试的选定值：

componentWrapper.findAll('#option').at(1).setSelected()

并且

componentWrapper.find('el-select')

有人可以帮我检索选择然后更改所选值吗？谢谢您的支持。

Answer 1

使用wrapper.vm.selectItem('foo'). 这个对我有用。

我在 vuetifyv-select测试中发现了这个：

旧：~~ https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L533~~

新：https : //github.com/vuetifyjs/vuetify/blob/b2abe9fa274feeb0c5033bf12cc48276d4ac5a78/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L28

编辑：更新链接。

Answer 2

我也一直在努力解决这个问题，最后找到了一种方法。我正在使用 Jest 和 vue-test-utils。基本上，您必须通过两个单独的步骤来完成。将选项标记为已选择，然后在选择上触发更改。

HTML 部分是：

      <select id="groupid" v-model="groupID">
        <option value="">-Select group-</option>
        <option v-for="g in groupList" 
          v-bind:value="g.groupId">{{g.groupId}} - {{g.groupName}}
        </option>
      </select>

测试是：

it('should populate the subgroup list when a group is selected', () => {
  expect(cmp.vm.groupID).toBe('');
  expect(cmp.findAll('select#groupid > option').length).toBe(3);
  cmp.findAll('select#groupid > option').at(1).element.selected = true;
  cmp.find('select#groupid').trigger('change');
  expect(cmp.vm.groupID).not.toBe('');
});