Question

编写单元测试用例的新功能。使用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％？

Answer 1

这是伊斯坦布尔和ES6语法的持续问题。超级电话正被选为分支机构。

一种解决方法是将此注释块放在super（props）下面：

/* istanbul ignore next */

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

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

使用伊斯坦布尔进行摩卡测试的测试代码覆盖率为50％。怎么做到100％？

1 个答案: