reactjs - React, Enzyme och Istanbul - kodtäckning saknar funktioner som körs av tester
Jag testar en React-komponent med 3 funktioner, jag har skrivit tester som använder alla 3 av dessa funktioner och testen går igenom men i rapporten om kodtäckning får jag bara 33%. Komponenten är nedan.
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;
Och mina tester...
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");
}
});
});
Tester anger att det är showWidget och hideWidget-funktionerna som inte testas, men de sista 2 testerna kör definitivt dessa funktioner, annars skulle inte testerna gå igenom.
Är detta en bugg i kodtäckning? Är det så att den inte gillar att jag använder rena Javascript-funktioner eller missförstår jag i grunden funktionens kodtäckning?
REDIGERA: täckningsrapportsbilder nedan
Svar #1
Jag hittade vad problemet var, jag körde testerna med kommandot react-scripts test --coverage --coverageDirectory=output/coverage --coverageReporters text --env=jsdom vilket uppdaterade cobertura.xml-filen men inte någon av HTML-filerna. Jag trodde att HTML-läste coberatura-filen och visade den, men så är inte fallet. Att lägga till HTML-flaggan till coverageReporters löste problemet.

