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

Posted 2023-02-26

我想测试一个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。

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