Javascript Vue jest测试在预期通过时失败

我正在遵循Pluralsight的指南，在那里我开始学习如何在Vue和Jest中进行单元测试。我对Vue和玩笑都很陌生。但这些测试非常直截了当，应该在明显不合格的情况下通过

这是我需要测试的HiChild组件。它有一个message属性和一个错误变量，当message属性长于或小于3时会发生更改

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

这是两个测试的输出：

---

找到了解决方案。组件最后没有

。

找到了解决方案。组件末尾没有

import { shallowMount } from '@vue/test-utils';
import HiChild from '@/components/HiChild.vue';

describe('HiChild.vue', () => {
  it('renders props.msg when passed', () => {
    const message = 'hello there!';
    const wrapper = shallowMount(HiChild, {
      propsData: { message },
    });
    expect(wrapper.text()).toMatch(message);
  });
});

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);
  });
});