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

user_4231848 0
Viewed 3986

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.

vue-test-utils vue.js
2 Answers

I had a similar issue and the accepted answer did not solve my problem. I don't think the accepted answer is correct either, as setChecked was added specifically to avoid having to manually set the values via the elements.

In my case, I wanted Vue to react to the v-model change and redraw. I tried async and many other methods, until finding the one that works: wrapper.vm.$forceUpdate().

Here's what my working code looks like:

wrapper.find("#someRadioButtonId").setChecked(true)
// manually force Vue to update
wrapper.vm.$forceUpdate() 
expect(wrapper.find("#someRadioButtonId").classes()).toContain("selected") // success!
user_17420700

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.

user_56146020
Related