vuedose.tips（翻译系列十四）

Testing logic inside a Vue.js watcher

Let’s start the Vue Tips Overload week with a tip made by Javier Martinez, a web developer at 64 robots (and a great person) which is quite active in the Spanish Vue.js community!

Psst: he lives in Murcia, so don’t hesitate to say hi to him if you ever visit the region 😉

Let’s get into the tip!

即使大多数时候我们使用计算属性来响应数据更改，但有时我们还是必须使用观察程序才能执行昂贵的操作或对API的异步调用。在此示例中，让我们保持简单。

假设您有一个内部值更改时发出输入事件的组件：

<template>
  <input v-model="internalValue" />
</template>
<script>
  export default {
    data() {
      return {
        internalValue: ""
      };
    },
    watch: {
      internalValue(value) {
        this.$emit("input", value);
      }
    }
  };
</script>

当需要测试此功能时，我们想到的第一件事是，我们必须安装该组件，更改internalValue数据，并期望观察者已被解雇。

您可以改为执行以下测试：

test("emits input event when interalValue changes", () => {
  const wrapper = shallowMount(YourComponent);

  wrapper.vm.$options.watch.internalValue.call(wrapper.vm, 15);

  expect(wrapper.emitted("input")[0][0]).toBe(15);
});

Vue将我们在组件中定义的每个观察者附加到$ options.watch对象，因此我们在这里要做的就是使用call（）直接调用该观察者。

调用的第一个参数是函数（组件实例）内部的上下文。然后，我们可以传递更多参数（值）。 总结一下：“不要测试框架”

有时很难从您正在使用的库经过数千次测试的功能中识别出您拥有的代码。我向您保证，更改数据时将触发观察者。

测试其中的逻辑，不要浪费您的宝贵时间来尝试重新创建场景和可能引起监视者注意的条件。