使用伊斯坦布尔进行 Mocha 测试的测试代码覆盖率为 50%。如何做到100%？

Question

编写单元测试用例的新手。使用伊斯坦布尔的分支中的代码覆盖率为 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%？

Answer 1

这是伊斯坦布尔和 ES6 语法的一个持续问题。超级呼叫正在作为一个分支接听。

一种解决方法是将此注释块放在 super(props) 的正下方：

/* istanbul ignore next */

我还没有找到合适的解决方案，因为我不热衷于用忽略块乱扔我的源。

来源：https://github.com/gotwarlost/istanbul/issues/690