javascript - 使用 element-ui 和 vue-test-utils 模拟选择

Question

我正在使用 Vue 中的 Jest 和 Element-ui 对包含带有 2 个选项的选择的组件进行单元测试。我正在从下拉列表中选择一个选项，然后检查是否已调用某个操作。
1) 正常select和 option HTML 标记这工作得很好。
//水果.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 有自己的交互。
2) 与 el-select和 el-option//水果.vue
保持不变，除了 select替换为 el-select和 option通过 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
一)

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) 鉴于 setSelected根据 vue-test-utils documentation 实际上是一个别名，我试过这样:

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没有更新。
所以我想知道是否有人对此有解决方案，或者是否有另一个库(vue-test-utils 除外) 使用哪个element-ui 的el-select可以模拟 .

Answer 1

<el-dropdown>中触发点击真的很麻烦或 <el-select>并使下拉项目出来。
然后我尝试模拟所有这些元素。这对我来说可以。
/mock/div.vue

<template>
  <div>
    <slot></slot>
    <slot name="dropdown"></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({   
  inheritAttrs: true
})
</script>

jest.setup.js

import { config } from '@vue/test-utils'
import Div from './mock/div.vue'
config.global.components = {  
   ElDropdown: Div,
   ElDropdownItem: Div,
   ElDropdownMenu: Div
}