[vue-test-utils] select html tag 테스트 방법

select 태그를 단위테스트할 경우,

참고: https://v1.test-utils.vuejs.org/api/wrapper/setselected.html

setSelected | Vue Test Utils

 

setSelected(): 특정 option element를 select한다. 그리고, v-model 데이터를 업데이트한다.

사용법

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

test('setSelected demo', async () => {
  const wrapper = mount(Foo)
  const options = wrapper.find('select').findAll('option')

  await options.at(1).setSelected()

  expect(wrapper.find('option:checked').element.value).toBe('bar')
})

// 체크 확인
expect(wrapper.find('option:checked').element.value).toBe('영어');

 

 

option.element.selected = true, parentSelect.trigger('input')다음 설정으로 

v-model을 통해서 select의 상태값을 변경하려고 할 때, 

v-model는 트리거되지 않는다. v-model은 change event로 트리거된다.