javascript - Vue Jest - 当 v-if 为 false 时，Div 元素仍然存在

Question

我有一个小项目，我正在学习在 Vue 中编写开玩笑的单元测试。在这个项目中，我有一个 HiChild 组件，它获取消息道具。当此消息的长度小于 3 时，应显示错误 div。我v-if="error"用来检查是否应该显示 div。

这是组件：

<template>
  <div>
    <h2>The child says {{ message }}</h2>
    <div class="error" v-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Hello",
    },
  },
  computed: {
    error() {
      return this.message.trim().length < 3
        ? " The child can say bigger words than that!"
        : "";
    },
  },
};
</script>

但是在我为这个组件编写的单元测试中，我有一个测试，当错误变量不为空时，我测试 div 是否实际存在，而当它为空时不存在。但是当它应该为空时，测试没有通过。这是我写的单元测试：

describe('HiChild.vue', () => {
  it('renders error when message is too short', () => {
    const wrapper = shallowMount(HiChild, {
      propsData: { message: 'hi' },
    });
    expect(wrapper.find('.error').exists()).toBe(true);

    wrapper.setProps({ message: 'good day to you!' });
    expect(wrapper.find('.error').exists()).toBe(false);
  });
});

这是测试的输出：

标签： javascriptvue.jsjestjs

Answer 1

因为 ：

 computed: {
    error() {
      return this.message.trim().length < 3
        ? " The child can say bigger words than that!"
        : "";
    },

"" 与 false 不同

"" !== false

像这样直接返回false

 computed: {
    error() {
      return this.message.trim().length < 3
        ? " The child can say bigger words than that!"
        : false;
    },

问候