Vue test utils - setChecked() not updating v-model

Question

I am writing unit tests for some components I made at my job. We are using Mocha (TDD) and the Chai assertion library. I have a component with some checkboxes, and using the setChecked() method on them from vue-test-utils is not behaving as expected. I have made a small example that reproduces the error:

TestComponent.vue:

<template>
    <div>
        <input class="checkboxTest" type="checkbox" v-model="cbVal">
        <input class="inputTest" type="text" v-model="textVal">
    </div>
</template>

<script>
    define([], function() {
        return {
            data: function() {
                return {
                    cbVal: false,
                    textVal: ""
                }
            }
        }
    })
</script>

test.js:

suite("Random test", function() {
  var VueTest;
  var TestComponent;

  //Import the vue test utils library and TestComponent
  suiteSetup(function(done) {
    requirejs(
      ["vue-test-utils", "vuec!components/TestComponent"],
      function(VT, TC) {
        VueTest = VT;
        TestComponent = TC;
        done();
      }
    );
  });


  //This test passes
  test("fill in the input", function() {
    var wrapper = VueTest.mount(TestComponent);
    wrapper.find(".inputTest").setValue("Hello, world!");

    assert.equal(wrapper.vm.textVal, "Hello, world!");
  });

  //This one does not
  test("programatically check the box", function() {
    var wrapper = VueTest.mount(TestComponent);
    wrapper.find(".checkboxTest").setChecked(true);

    //Prints out AssertionError: expected false to equal true
    assert.equal(wrapper.vm.cbVal, true);
  });
});

The textVal data member in TestComponent is getting changed, but cbVal is not. Can anyone please explain why setValue() works just fine, but setChecked() does not? Thank you in advance.

Answer 1

I can't answer why it doesn't work, but I can tell you your approach is incorrect in the first place.

You shouldn't be interacting with the html elements directly to set their values. When you set vue-model to cbVal you should instead be interacting with cbVal.

In other words, change your code from setChecked() to cbVal = true in order for it to comply with how Vue wants you to develop your project. There's no guarantee Vue can remain dynamic and reactive if you don't interact with your code the way Vue wants you to.