Почему охват Jest (Стамбул) измеряет 0 ветвей в этом методе компонента Vue? - PullRequest
Новая
       37

Почему охват Jest (Стамбул) измеряет 0 ветвей в этом методе компонента Vue?

0 голосов
/ 01 января 2019

Пожалуйста, рассмотрите следующий - несколько надуманный - компонент 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');
    });
});

Тест проходит зеленым цветом.

Когда я запускаю Jest с --coverage для этого файла, я получаю следующий сводный отчет: 

=============================== 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() как покрытую ветку?

1 Ответ

0 голосов
/ 23 августа 2019

Полагаю, вы неправильно понимаете, что такое ветвь.

Оператор похож на строку кода.Ветвь может существовать только тогда, когда условие заставляет некоторые операторы выполняться или нет.

В следующем коде нет ветвления: 

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

Это потому, что нет if или любой другой вид условного оператора.

В следующем коде есть 2 ветви: одна для if и одна для неявного else. 

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

ЕслиВы хотите охватить все ветви, вам нужно добавить тест, когда this.text равен undefined.

...