vue 测试实用程序:在 el-select元素 ui中触发更改不起作用

问题描述

我有一个问题,我无法触发更改 el-select。它在正常选择上运行良好。 el-checkBox 也很好用。我曾尝试查看类似此处的其他主题

https://stackoverflow.com/questions/53749460/simulate-select-with-element-ui-and-vue-test-utils[enter 此处的链接说明]1

https://github.com/vuejs/vue-test-utils/issues/260

但没有什么可以阻止它不工作。

你有什么想法吗?

这是我的原始代码(抱歉是哈巴狗)

el-form-item#recommendationAlgorithmProcess(prop="process")
  el-select#recommendationAlgorithmSelectProcess(v-model="recommendationAlgorithm.processId",@change="addProcessparamsToAlgorithm()",name="process",:disabled="this.editMode",filterable,value-key="process",:placeholder="$t('choose algorithm process')")
    el-option(v-for="process,index in recommendationAlgorithmProcesses",:key="index",:label="$t(process._embedded.algorithmProcessDeFinition.description)",:value="process.internalId")

还有我的测试

import { shallowMount,createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import router from '../router'
import i18n from '@/i18n'
import RecommendationAlgorithmEdit from '@/components/RecommendationAlgorithmEdit'
import _ from 'lodash'
import { Select,Option,Input,Row,Col,FormItem,Form,Card } from 'element-ui'

it.only('Should add selected process parameters to algorithm',async () => {
const wrapper = shallowMount(RecommendationAlgorithmEdit,{
    store,computed,localVue,router,i18n,stubs: {
      'el-form': Form,'el-card': Card,'el-row': Row,'el-col': Col,'el-input': Input,'el-form-item': FormItem,'el-select': Select,'el-option': Option
    }
  })
wrapper.vm.$router.push({
  name: 'add a new recommendation algorithm'
})
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('change')
console.log('####: ',wrapper.vm.recommendationAlgorithm.processparameterValues)})

我也尝试过其他方法

wrapper.findAll('.el-select-dropdown__item').at(1).element.selected = true
wrapper.find('#recommendationAlgorithmSelectProcess').trigger('change')

但没有任何效果,我向更改函数 (addProcessparamsToAlgorithm) 添加一个 console.log,但它没有出现在控制台中。

请注意,我尝试使用元素的其他元素,除了 el-select 之外,其他所有元素都可以正常工作。

提前致谢

解决方法

我已经解决了我的问题:

import { Select,Option,Input,Row,Col,FormItem,Form,Card } from 'element-ui'
const wrapper = shallowMount(YourComponent,{
    store,computed,localVue,router,i18n,stubs: {
      'el-form': Form,'el-card': Card,'el-row': Row,'el-col': Col,'el-input': Input,'el-form-item': FormItem,'el-select': Select,'el-option': Option
    }
  })
const reco = wrapper.find(Select)
reco.vm.$emit('change')