VueJS单元测试“要测试什么”,属性内容?

时间:2019-12-20 07:26:24

标签: javascript unit-testing vue.js jestjs

我正在用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而不是我的组件?

1 个答案:

答案 0 :(得分:2)

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

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

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