使用 Istanbul 进行 Mocha 测试的测试代码覆盖率为 50%。如何做到100%?
Test code coverage is 50% in brances using Istanbul for Mocha test. How to make it 100%?
编写单元测试的新手 cases.Code 使用 istanbul 进行反应代码测试的分支覆盖率为 50% - MOCHA + CHAI + ENZYME。无法弄清楚代码中缺少什么。
subscription.js:
import React from 'react';
export default class Subscription extends React.Component {
constructor(props) {
super(props);
this.state = {
input:'',
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(e){
e.preventDefault();
this.setState({
input: ''
})
}
handleChange(e) {
this.setState({
input:e.target.value
})
}
render() {
//Setting up className here
//let inputSel = this.state.isChecked?"active":"";
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="email" onChange={this.handleChange} value={this.state.input} />
<button className="buttonStyle">Subscribe</button>
</form>
</div>
);
}
} //end of class
app.js:
import React from 'react';
import {render} from 'react-dom';
import Subscription from './Subscription'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Subscription />
</div>
);
}
}
render(<App />,document.getElementById('app'));
test.js
import React from 'react';
import sinon from 'sinon';
import {mount,shallow} from 'enzyme';
import { expect } from 'chai';
import Subscription from '../src/client/app/Subscription'
describe('<Subscription />', function() {
before(function() {
it('should have subscription component',function(){
expect(shallow (<Subscription />)).to.have.length(1);
});
});
it('should have a form ',function(){
const wrapper = shallow (<Subscription />);
expect(wrapper.find('form')).to.have.length(1);
});
it('should have an input box with type email', function() {
const wrapper = shallow (<Subscription />);
expect(wrapper.find('input[type="email"]')).to.have.length(1);
// expect(wrapper.find('.subscribeinput')).to.equal(true);
});
it('should have a button', function () {
const wrapper = shallow(<Subscription />);
expect(wrapper.find('button')).to.have.length(1);
});
it('input and button should be child of form',function(){
const wrapper = shallow (<Subscription />);
expect(wrapper.find('input').parent().is('form')).to.equal(true);
expect(wrapper.find('button').parent().is('form')).to.equal(true);
});
it('should have an initial email state', function () {
const wrapper = mount(<Subscription/>);
expect(wrapper.state().input).to.equal('');
});
it('should update the src state on changing input', function () {
const wrapper = mount(<Subscription/>);
wrapper.find('input').simulate('change', {target: {value: 'hello@ifelse.io'}});
//wrapper.setState({ input: (wrapper.find('input[type="email"]').value()) });
expect(wrapper.state().input).to.equal('hello@ifelse.io');
});
it('should update the input box on subscribe', function () {
const handleSubmit = sinon.spy();
const wrapper = mount(<Subscription/>);
wrapper.find('button').simulate('submit', { preventDefault() {} });
expect(handleSubmit).to.have.been.called;
expect(wrapper.state('input')).to.equal('');
});
});
** 使用伊斯坦布尔的覆盖摘要结果 **
报道摘要
报表:100% ( 9/9 )
分支机构 : 50% ( 1/2 )
功能 : 100% ( 1/1 )
线条:100% ( 9/9 )
为什么只有分支机构占 50%?应该怎么做才能达到 100%?
这是 Istanbul 和 ES6 语法的持续问题。 super 调用正在被提取为一个分支。
一种解决方法是将此评论块放在 super(props) 的正下方:
/* istanbul ignore next */
我还没有找到合适的解决方案,因为我不喜欢用忽略块乱丢我的源代码。
编写单元测试的新手 cases.Code 使用 istanbul 进行反应代码测试的分支覆盖率为 50% - MOCHA + CHAI + ENZYME。无法弄清楚代码中缺少什么。
subscription.js:
import React from 'react';
export default class Subscription extends React.Component {
constructor(props) {
super(props);
this.state = {
input:'',
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(e){
e.preventDefault();
this.setState({
input: ''
})
}
handleChange(e) {
this.setState({
input:e.target.value
})
}
render() {
//Setting up className here
//let inputSel = this.state.isChecked?"active":"";
return (
<div>
<form onSubmit={this.handleSubmit}>
<input type="email" onChange={this.handleChange} value={this.state.input} />
<button className="buttonStyle">Subscribe</button>
</form>
</div>
);
}
} //end of class
app.js:
import React from 'react';
import {render} from 'react-dom';
import Subscription from './Subscription'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Subscription />
</div>
);
}
}
render(<App />,document.getElementById('app'));
test.js
import React from 'react';
import sinon from 'sinon';
import {mount,shallow} from 'enzyme';
import { expect } from 'chai';
import Subscription from '../src/client/app/Subscription'
describe('<Subscription />', function() {
before(function() {
it('should have subscription component',function(){
expect(shallow (<Subscription />)).to.have.length(1);
});
});
it('should have a form ',function(){
const wrapper = shallow (<Subscription />);
expect(wrapper.find('form')).to.have.length(1);
});
it('should have an input box with type email', function() {
const wrapper = shallow (<Subscription />);
expect(wrapper.find('input[type="email"]')).to.have.length(1);
// expect(wrapper.find('.subscribeinput')).to.equal(true);
});
it('should have a button', function () {
const wrapper = shallow(<Subscription />);
expect(wrapper.find('button')).to.have.length(1);
});
it('input and button should be child of form',function(){
const wrapper = shallow (<Subscription />);
expect(wrapper.find('input').parent().is('form')).to.equal(true);
expect(wrapper.find('button').parent().is('form')).to.equal(true);
});
it('should have an initial email state', function () {
const wrapper = mount(<Subscription/>);
expect(wrapper.state().input).to.equal('');
});
it('should update the src state on changing input', function () {
const wrapper = mount(<Subscription/>);
wrapper.find('input').simulate('change', {target: {value: 'hello@ifelse.io'}});
//wrapper.setState({ input: (wrapper.find('input[type="email"]').value()) });
expect(wrapper.state().input).to.equal('hello@ifelse.io');
});
it('should update the input box on subscribe', function () {
const handleSubmit = sinon.spy();
const wrapper = mount(<Subscription/>);
wrapper.find('button').simulate('submit', { preventDefault() {} });
expect(handleSubmit).to.have.been.called;
expect(wrapper.state('input')).to.equal('');
});
});
** 使用伊斯坦布尔的覆盖摘要结果 **
报道摘要 报表:100% ( 9/9 ) 分支机构 : 50% ( 1/2 ) 功能 : 100% ( 1/1 ) 线条:100% ( 9/9 )
为什么只有分支机构占 50%?应该怎么做才能达到 100%?
这是 Istanbul 和 ES6 语法的持续问题。 super 调用正在被提取为一个分支。
一种解决方法是将此评论块放在 super(props) 的正下方:
/* istanbul ignore next */
我还没有找到合适的解决方案,因为我不喜欢用忽略块乱丢我的源代码。