Test code coverage is 50% in brances using Istanbul for Mocha test. How to make it 100%?

Question

New to writing unit test cases.Code Coverage is 50% in branch using istanbul for react code with testing - MOCHA + CHAI + ENZYME. Not able to figure out what's missing in the code.

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('');
          });

        });

** Result of Coverage summary using Istanbul **

Coverage summary Statements : 100% ( 9/9 ) Branches : 50% ( 1/2 ) Functions : 100% ( 1/1 ) Lines : 100% ( 9/9 )

why is branches alone 50%? what should be done to make it 100%?

Answer 1

This is an ongoing issue with Istanbul and ES6 syntax. The super call is being picked up as a branch.

One workaround is to place this comment block right beneath super(props):

/* istanbul ignore next */

I have still yet to find a proper solution as I am not keen on littering my source with ignore blocks.

source: https://github.com/gotwarlost/istanbul/issues/690