[vue-test-utils]: wrapper.setChecked() must be passed a boolean

Question

Using Vue, I have some radio inputs:

  <label>
    <input
      v-model="myProperty"
      v-bind:value="true"
      name="myProperty"
      type="radio"
    > True
  </label>

  <label>
    <input
      v-model="myProperty"
      v-validate="input.rules ? input.rules : ''"
      v-bind:value="false"
      name="myProperty"
      type="radio"
    > False
  </label>

I'm testing them with vue-test-utils and jest, where I select and assign a value to my field:

let myProperty = wrapper.find('[name="myProperty"]')
myProperty.setChecked(false)

According to the documentation, it appears that's how it's supposed to work. But I get this error:

[vue-test-utils]: wrapper.setChecked() must be passed a boolean

It works, however, when I set the value as true instead of false. As an experiment, I tried setting the value as the string 'false':

myProperty.setChecked('false')

Then I got this errror:

[vue-test-utils]: wrapper.setChecked() must be passed a boolean

So how am I supposed to select the radio input I want in vue-test-utils when the value is false? And what if my radio inputs have strings for values?

Answer 1

You need to call setChecked on another radio input in the group. This will un check all other radio buttons in a group, since only one can be checked at a time:

wrapper.find('[name="other property"]').setChecked(true)

In Vue Test Utils we disallow setting a radio button checked to false, since this enables you to put a radio-group into a state where none are checked, despite this not being possible as a user.

Perhaps we should reconsider this design decision. If you have a use case, please create a feature request in the Vue Test Utils GitHub repo.