使用element-ui和vue-test-utils模拟选择 [英] Simulate select with element-ui and vue-test-utils

问题描述

我正在对Vue中的Jest和Element-ui进行单元测试，该组件包含一个带有2个选项的select.我从下拉菜单中选择一个选项，然后检查是否已调用操作.

I'm doing unit tests with Jest and Element-ui in Vue on a component which contains a select with 2 options. I am selecting an option from a dropdown and then checking that an action has been called.

1)，使用普通的 select 和 option HTML标记，效果很好.

1) With normal select and option HTML tags this works perfectly.

//Fruit.vue

<template lang="pug">
  select(
    v-model="fruit"
  )
    option(
      v-for="item in fruits"
      :label="item.label"
      :value="item.value"
    )
</template>
<script>
export default {
  data () {
    return {
      fruits: [
        {
          label: 'Banana',
          value: false
        },
        {
          label: 'Apple',
          value: false
        }
      ]
    }
  },
  computed: {
    fruit: {
      get () {
        return this.$store.state.fruit
      },
      set (fruit) {
        this.$store.dispatch('setSelectedFruit', { fruit })
      }
    }
  }
</script>

//DOM

<select>
  <option label="Banana" value="false"></option>
  <option label="Apple" value="false"></option>
</select>

//Fruit.spec.js

it('calls the "setSelectedFruit" action when a value is selected', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.find('select').findAll('option')


  options.at(1).setSelected()
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

但是我使用element-ui的 el-select 和 el-option ，它们与DOM有自己的交互作用.

However I use element-ui's el-select and el-option, which have their own interaction with the DOM.

2)使用 el-select 和 el-option

//Fruit.vue

保持不变，除了 select 被 el-select 和 option 替换为 el-option

Stays the same, except that select is replaced by el-select and option by el-option.

//DOM

<div class="el-select-dropdown">
  <div class="el-select-dropdown__wrap">
    <ul class="el-select-dropdown__list">
      <li class="el-select-dropdown__item">
        <span>Banana</span>
      </li>
      <li class="el-select-dropdown__item">
        <span>Apple</span>
      </li>
    </ul>
  </div>
</div>

//Fruit.spec.js

a)

it('calls the "setSelectedFruit" action', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.find('.el-select-dropdown__list').findAll('el-select-dropdown__items')

  options.at(1).setSelected()
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

b)鉴于

b) Given that setSelected is actually an alias according to the vue-test-utils documentation, I tried it this way:

it('calls the "setSelectedFruit" action', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.findAll('.el-select-dropdown__item')
  const select = wrapper.find('.el-select-dropdown__list')

  options.at(1).element.selected = false
  select.trigger('change')
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

使用第二种方法，将选定的 option 设置为 selected ，但是 select 上的触发器不起作用，因此 v-model 未更新.

With the second method, the chosen option is set as selected, but the trigger on the select doesn't work and so the v-model isn't updated.

因此，我想知道是否有人对此有解决方案，或者是否还有另一个库(vue-test-utils除外)，其中哪个是element-ui的 el-select 可以模拟.

So I'd like to know if someone has a solution for this, or if there is another library (other than vue-test-utils) with which element-ui's el-select can be simulated.

推荐答案

我能够通过触发您要模拟的下拉项的单击来使此工作正常进行:

I was able to get this working by triggering a click on the drop down item that you would like to simulate:

wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(YourExpectStatement);

我需要Vue.nextTick()，因为它允许DOM更新其周期，更多

The Vue.nextTick() was needed for me, as it allows the DOM to update it's cycle, more info here. Also note you'll need to make your test function async, like:

it('Async test name', async () => {

这篇关于使用element-ui和vue-test-utils模拟选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！