vue test util: trigger change in el-select (element ui) not working

Question

I have a problem, I can't trigger change the el-select. It works fine on a normal select. The el-checkbox also works well. I have tried to see other subjects like here:

https://stackoverflow.com/questions/53749460/simulate-select-with-element-ui-and-vue-test-utils[enter link description here]1

or

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

but nothing can stop it from not working.

Do you have an idea?

Here's my original code(sorry it's pug):

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")

And my test:

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)})

I have also tried with other methods:

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

But nothing works, I added a console.log to the change function (addProcessParamsToAlgorithm) but it doesn't appear in the console.

Note that I tried with the other elements of the element where everything works except the el-select.

Thanks in advance

score 0 · Answer 1 · answered Jan 22 '21 at 15:27

I have solved my problem :

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')

vue test util: trigger change in el-select (element ui) not working

1 Answers1