测试 Vue 增强输入的值没有按预期工作

Question

我想测试一个 Vue 输入组件，它会在已安装的钩子上更改其输入（以及稍后在模糊上）。组件本身似乎可以工作，但测试实用程序没有获得正确的值。我在此演示中使用茉莉花测试框架：

const appendValue = '_lily';

const testInput = {
  props: ['value'],
  template: `<input ref="testInput" v-on:blur="appendTest" v-model="inputValue"/>`,
  mounted() {
    this.appendTest();
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  },
  methods: {
    appendTest() {
      this.$emit('input', this.value + appendValue);
    }
  }
}

describe("Vue-input-test", function() {
  it("appends _lily", function(done) {
    const testValue = "tiger";
    const tWrapper = VueTestUtils.mount(testInput, {
      propsData: {
        value: testValue
      }
    });

    Vue.nextTick(function() {
      const expectedValue = testValue + appendValue;
      expect(tWrapper.emitted().input.length).toEqual(1);
      expect(tWrapper.emitted().input[0][0]).toEqual(expectedValue);

      /* These assertions fail: */
      expect(tWrapper.vm.$refs.testInput.value).toEqual(expectedValue);
      expect(tWrapper.vm.value).toEqual(expectedValue);

      tWrapper.destroy();
      done();
    });
  });
});

Here 是我的 fiddle。我很感激每一个有用的建议。谢谢！

Answer 1

您的测试缺少 父组件，这是对事件的警告，尤其是 v-model 自定义组件。

请记住，v-model 大致等同于：

:value="value" @input="value = $event"

因为你是在没有父组件的情况下直接测试组件，所以没有人监听 input 事件，这意味着 value = $event 部分永远不会运行，所以 value 属性将永不改变。

您可以通过使用另一个组件包装您的 utils.mount 调用来解决此问题：

const tWrapper = VueTestUtils.mount({
  template: '<div><test-input v-model="value"></test-input></div>',
  components: {
    testInput
  },
  data: () => ({
    value: testValue
  })
});

失败的断言现在将通过，但当然有些断言必须更改。我更新了 fiddle for you.

这在真实的应用程序中永远不会发生，因为总有一个根组件，所以所有其他组件很可能都有一个父组件。

测试 Vue 增强输入的值没有按预期工作

Testing the value of a Vue enhanced input does not work as expected

javascript

vue.js

vue-test-utils