Question

我正在为工作中编写的某些组件编写单元测试。我们正在使用Mocha（TDD）和Chai断言库。我有一个带有一些复选框的组件，并且在vue-test-utils上对它们使用setChecked（）方法的行为不符合预期。我举了一个小例子来重现错误：

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);
  });
});

TestComponent中的textVal数据成员正在更改，但cbVal没有更改。任何人都可以解释为什么setValue（）可以正常工作，但是setChecked（）不能正常工作吗？预先谢谢你。

Answer 1

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

就我而言，我希望Vue对v-model的更改做出反应并重新绘制。我尝试了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!

Answer 2

我无法回答为什么它不起作用，但是我可以告诉您您的方法首先是错误的。

您不应直接与html元素进行交互以设置其值。将vue-model设置为cbVal时，您应该与cbVal进行交互。

换句话说，将您的代码从setChecked()更改为cbVal = true，以使其符合Vue希望您开发项目的方式。如果您不按照Vue希望的方式与代码交互，则无法保证Vue可以保持动态和反应性。

Vue测试工具-setChecked（）不更新v模型

2 个答案: