React, Enzyme и Istanbul - отсутствующие функции покрытия кода, выполняемые тестами - PullRequest
Новая
       24

React, Enzyme и Istanbul - отсутствующие функции покрытия кода, выполняемые тестами

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

Я тестирую компонент React с 3 функциями, я написал тесты, в которых используются все эти 3 функции, и прошел тест, однако в отчете о покрытии кода я получаю только 33%. Компонент ниже. 

const AddWidget = ({ }: Props) => {

    var id = generateGuid().slice(0, 8);

    var showWidget = () => {
        document.getElementById(id).style.zIndex = "10";
    }

    var hideWidget = () => {
        document.getElementById(id).style.zIndex = "200";
    }

    return (
        <div onMouseLeave={hideWidget} onMouseEnter={showWidget} className="addWidget" >
            <div className="divide" />
            <div id={id} className="cover" />
            <div>
                <CircularButton type={CircularButtonType.DarkAdd} small={true} />
                <p>Add a widget here</p>
            </div>
        </div>
    );
}

export default AddWidget;

И мои тесты ... 

import * as React from 'react';
import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import AddWidget from './AddWidget';

Enzyme.configure({ adapter: new Adapter() });

const addWidget = Enzyme.mount(<AddWidget />, { attachTo: document.body });

describe('AddWidget', () => {
    test('renders without crashing', () => {
        expect(addWidget.find(AddWidget).length).toBe(1);
    });

    test('should render parent element with class "addWidget"', () => {
        expect(addWidget.find('div').at(0).hasClass('addWidget')).toBe(true);
    });

    test('should cover component from view when mouse is not hovering', () => {
        addWidget.simulate('mouseEnter');
        addWidget.simulate('mouseLeave');
        var covers = document.getElementsByClassName('cover');
        for (var n = 0; n < covers.length; n++) {
            expect((covers[n] as HTMLElement).style.zIndex).toBe("200");
        }
    });

    test('should show component from view onMouseEnter', () => {
        addWidget.simulate('mouseEnter');
        var covers = document.getElementsByClassName('cover');
        for (var n = 0; n < covers.length; n++) {
            expect((covers[n] as HTMLElement).style.zIndex).toBe("10");
        }
    });
});

В тестах указывается, что функции showWidget и hideWidget не тестируются, но последние 2 теста определенно запускают эти функции, иначе тесты не пройдут.

Это ошибка покрытия кода? Это то, что мне не нравится, что я использую чистые функции Javascript или я в корне неправильно понимаю покрытие кода функции?

РЕДАКТИРОВАТЬ: изображения отчета покрытия ниже

Breakdown

Details

1 Ответ

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

Я обнаружил, в чем проблема, я запускал тесты с помощью команды react-scripts test --coverage --coverageDirectory=output/coverage --coverageReporters text --env=jsdom, которая обновляла файл cobertura.xml, но не какой-либо из html. Я думал, что HTML прочитал файл coberatura и отобразил его, но это не так. Добавление html-флага к coverReporters решило проблему.

...