vue.js - Vue 测试工具 - setChecked() 不更新 v-model

Question

我正在为我在工作中制作的一些组件编写单元测试。我们正在使用 Mocha (TDD) 和 Chai 断言库。我有一个带有一些复选框的组件，对它们使用 vue-test-utils 中的 setChecked() 方法没有按预期运行。我做了一个重现错误的小例子:

测试组件.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>

测试.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);
  });
});

TestComponent 中的 textVal 数据成员正在更改，但 cbVal 未更改。谁能解释一下为什么 setValue() 工作得很好，但 setChecked() 不行？先感谢您。

Answer 1

我有一个类似的问题，接受的答案并没有解决我的问题。我认为接受的答案也不正确，如 setChecked是 added specifically to avoid having to manually set the values via the elements .

就我而言，我希望 Vue 对 v-model 使用react改变和重绘。我试过 async和许多其他方法，直到找到有效的方法:wrapper.vm.$forceUpdate() .

这是我的工作代码的样子:

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