Question

请考虑以下内容-有些虚构的Vue组件：

<!-- FooBar.vue -->
<template>
    <div @click="onClick">{{text}}</div>
</template>

<script>
    export default {
        name: 'foo-bar',
        data() {
            return {
                text: 'foo'
            }
        },
        methods: {
            onClick() {
                this.text = 'bar';
            }
        }
    }
</script>

我已经用Jest单元测试覆盖了组件，如下所示：

// FooBar.spec.js

import FooBar from '~/FooBar.vue';
import { shallowMount } from '@vue/test-utils';
import { expect } from 'chai';

describe('FooBar onClick()', () => {
    it('should change the text to "bar"', () => {
        // Arrange
        const target = shallowMount(FooBar);

        // Act
        target.trigger('click');

        // Assert
        const div = target.find('div');
        expect(div.text()).to.equal('bar');
    });
});

测试通过绿色。

当我使用--coverage对该文件运行Jest时，会得到以下摘要报告：

=============================== Coverage summary ===============================
Statements   : 0.1% ( 2/1868 )
Branches     : 0% ( 0/1402 )
Functions    : 0% ( 0/505 )
Lines        : 0.2% ( 2/982 )
================================================================================

如您所见，单元测试覆盖的分支数量显示为0-即使Jest（或更准确地说是Instanbul，Jest在幕后使用它进行覆盖）确实检测到测试涵盖了两行代码。

当我做了一个小实验并在if内添加了onClick()语句后，就这样了：

onClick() {
    if (this.text != undefined) {
        this.text = 'bar';
    }
}

那Jest确实确实算出1个分支。

我的问题是-为什么Jest / Istanbul不将onClick()中的代码作为分支覆盖？

Answer 1

我猜你误解了什么是分支。

一条语句类似于一行代码。仅当条件使某些语句要执行或不执行时，分支才能存在。

在下面的代码中，没有分支：

onClick() {
    this.text = 'bar';
}

这是因为没有if或任何其他类型的条件语句。

在下面的代码中，有2个分支：一个用于if，一个用于隐式else。

onClick() {
    if (this.text != undefined) {
        this.text = 'bar';
    }
}

如果您希望涵盖所有分支，则需要在this.text为undefined时添加测试。

为什么在这种Vue组件方法中，Jest coverage（伊斯坦布尔）会测量0个分支？

1 个答案: