VueJS单元测试“要测试什么”，属性的内容？

Question

我在第一次使用 Jest 进行 VueJS 单元测试时遇到了困难。

我理解了这个概念并且已经编写了我的第一个成功的测试，但是“测试什么”的问题一直在我的脑海中

例如：我的组件中有一个元素

      <img v-if="!hasHoverEffect"
           :alt="model.alt"
           :src="src"
           :style="styles"
           :title="model.title"
           :class="model.shadow"
           class="img-fluid centered"/>

问题是：这里要测试什么？ 到目前为止，我已经编写了 2 个测试

    test('renders by default', () => {
      const wrapper = factory.default();
      const img = wrapper.find('div.position-relative > img');
      expect(img.element).toBeDefined();
    });

    test('does not render if model.hovereffect is true', () => {
      const wrapper = factory.default({
        propsData: {
          model: {
            hovereffect: 'true'
          }
        }
      });
      const img = wrapper.find('div.position-relative > img');
      expect(img.element).not.toBeDefined();
    });

下一个测试应该是 test('by default alt is empty', () => { 还是完全过时，因为这将测试 vuejs 而不是我的组件？

Answer 1

对于我来说，我问自己一个问题，我想要测试的组件的重要方面是什么。通常，对于您的情况，我也会说，这就足够了：

1. 组件是否渲染成功
2. 它的行为是否符合预期

可以编写 100 个测试来检查每个细节/场景，但这不是必需的 (IMO)。我认为您到目前为止编写的测试很好地涵盖了这两点。添加另一个只是为了检查 alt 标签已经结束了。