测试Vue增强输入的值无法按预期工作

2024-05-21 • 问答

我想测试一个Vue输入组件，该组件会在已安装的挂钩上更改其输入（随后在模糊时）。该组件本身似乎可以正常工作，但test-utils无法获得正确的值。我使用茉莉花测试框架进行演示：

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是我的小提琴。感谢您提出的每条建议。谢谢！

您的测试缺少父组件，这是对事件的警告，尤其是自定义组件上的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增强输入的值无法按预期工作

lblwb 回答：测试Vue增强输入的值无法按预期工作

大家都在问