Vue-test-utils: How can I get the selected option in a `select`?

[githorse]

How do I get the currently selected option in a select tag? Following #79 doesn't work here:

let select = wrapper.find('select')
let selectedOption = select.element.value      # => ''

The select works correctly in the browser and has the correct binding. How do I test it?

[Austio]

Could you post up a jsfiddle to reproduce?

My first thought is that your first option could be blank and that would return '' for the value. The html would looks something like below where your first option is empty for value.

<select>
  <option></option>
  <option value="orange">The New Black</option>
</select>

[lmiller1990]

This may have been answered here, take a look.

[githorse]

@Austio Good guess! I had an empty placeholder option in first place; removing it fixes the problem. The correct value is now in select.element.value. I'm still a little confused as to why the empty option screws things up -- since it's not actually selected, why does it impact the value?

[Austio]

It is the way that the HTML select specification is written . The value when there are no selected elements is the first non disabled value.

[githorse]

Figured it out. The problem was there should have been a selected element, but it wasn't showing up. Turns out I was using a two-letter state code ("NY") in the real data (where everything worked) and the full state name ("New York") in the test. Fixing this means the value is available in select.element.value as expected :)

[bambielli]

@githorse thank you for posting your resolution here. I was trying to set my select field to a non-option value for the last hour, and wasn't understanding why it was coming back blank...

Much appreciated.