Question

我是Jest的新手，正在尝试为我的Vue应用编写测试以确认子组件发出事件，并因此更新其prop值。

作为一个例子，我制作了一个带有计数器的简单应用程序来演示：

/* Parent Home.vue */
<template>
  <Counter :count="count" @increment="count++"/>
</template>

<script>
import Counter from "@/components/Counter.vue";
export default {
  components: { Counter },
  data: () => ({
    count: 0,
  }),
};
</script>

/* Child Counter.vue */
<template>
  <v-container>
    <div id="propTracker">{{ count }}</div>
    <v-btn ref="incrementProp" @click="increment($event)">Increase prop</v-btn>
  </v-container>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    increment() {
      this.$emit("increment");
    },
  },
};
</script>

一旦按下Counter中的按钮，它将发出一个increment事件以增加父Home组件中的计数。

这是我编写的测试：

  it("Click should increment count text", async () => {
    const wrapper = mount(Counter, {
      localVue,
      vuetify,
      propsData: { count: 0 },
    });

    expect(wrapper.find("#propTracker").text()).toBe("0"); //initial state

    const button = wrapper.find({ ref: "incrementProp" });
    await button.trigger("click"); //trigger click

    expect(wrapper.find("#propTracker").text()).toBe("1"); //after click
  });

它以Expected: "1" Received: "0"的形式返回，表明在测试中未处理道具更新。我试图结合许多资源，例如Vue准则here和Vuetify单元测试信息here，但一直保持不变。我想念一块拼图了，现在已经找了两天了。

这是经过简化的repo，具有更好的画面并可能在本地播放。

一个测试，看看增量是否适用于本地数据值可以正常工作：here，所以实际上是带有道具并发出光线的场景，这让我很头疼。任何帮助将是物有所值！

Answer 1

我下载了您的存储库并进行了测试，一切正常。除了没有定义变量的标题外。参见印刷品：https://puu.sh/GKmzu/69a9fe9f0a.png

Answer 2

我认为您应该测试是否发出事件。请注意，如果您测试本地计数器，则测试将通过，但不会进行道具计数。那是因为测试没有在Home组件上看到代码。请记住，这是一个单元测试，目标是对组件进行隔离测试。

Answer 3

好的，我终于找到了解决方案！我在事情上走错了路，并尝试测试子组件中的父数据更改。使用我拥有的组成（子组件Counter会发出一个事件并触发父级Home组件的更改），这是有效的测试：


  it("Counter button changes count in Home", () => {
    const wrapper = mountFactory(Home);

    //check if initial count in Home is 0
    expect(wrapper.vm.count).toBe(0);

    //click btn in Counter (child component)
    wrapper.find("#incrementBtn").trigger("click");

    //check if increment worked and count has increased
    expect(wrapper.vm.count).toBe(1);
  });

在“笑话”中思考的学习曲线：）

如何在Jest中测试Vue道具更新

3 个答案: