vuejs2jestjsvue-test-utilselement-ui

Triggering click on <el-select> doesn't change v-model


Im having trouble trying to trigger click events on Element UI components. I try to click the el-select to open the dropdown menu, and click on an option, but the initial value declared on the initial props never changes. It always returns common.ativos_inativos

Can someone give me a light ?

test:

it('Erro no vue-test-utils clicar na lista de opções do select não funciona', async () => {
  t.initWrapper({
    propsData: {
      value: ''
    }
  })
  await t.wrapper.find('#SelectAtivoInativo').trigger('click')
  await t.wrapper.vm.$nextTick()
  await t.wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click')
  await t.wrapper.vm.$nextTick()

  expect(t.wrapper.find('#SelectAtivoInativo').element.value).toBe('common.ativo')
})

Vue component:

<template>
  <el-select
    id="SelectAtivoInativo"
    :value="value"
    :readonly="readonly"
    :disabled="_disabled"
    @input="input"
    @change="change"
  >
    <el-option
      :label="$t('common.ativos_inativos')"
      value=""
    />
    <el-option
      :label="$t('common.ativo')"
      value="1"
    />
    <el-option
      :label="$t('common.inativo')"
      value="0"
    />
  </el-select>
</template>

Solution

  • According to your markup the value of #SelectAtivoInativo when('.el-select-dropdown__item').at(1) is selected should be 1. common.inativo is the label not the value of your option.

    The following should pass:

    expect(t.wrapper.find('#SelectAtivoInativo').element.value).toBe('1')