sinon 스텁 구성 요소

Question

내가 효소 + Sinon을 uszing 반응 구성 요소에 대한 클릭을 테스트하기 위해 노력하고있어 반응

var stub = sinon.stub(Comp.prototype, 'save', function() { }); 

let wrapper = shallow(
    <Comp/> 
); 

wrapper.find('.btn-header').simulate('click'); 
sinon.assert.called(stub); 

Comp.prototype.refineOnClick.restore(); 

내 경화제 구성 요소 예외를 throw 저장 기능이

save: function() { 
    throw('error'); 
} 

테스트를 실행할 때 오류가 발생하지 않고 스텁의 비어있는 기능이 실행되기를 기대하지만 그렇게하지는 않습니다. 구성 요소 내부의 실제 함수가 실행되고 빈 스텁은 실행되지 않습니다.

Answer 1

단위 테스트의 원칙 중 하나는 테스트중인 유닛의 내부를 위조해서는 안된다는 것입니다. 테스트가 읽기 쉽고 유지 보수가 쉽지 않습니다. 방법 save은 분명히 Comp의 내부이므로 가짜가 아니어야합니다.

해당 구성 요소에 매개 변수로 전달한다면 그것은 확인을 것 :

var stub = sinon.stub(); 

let wrapper = shallow(
    <Comp onSave={stub} /> 
); 

wrapper.find('.btn-header').simulate('click'); 
sinon.assert.called(stub); 

Answer 2

당신은이 인스턴스의 사용하여 효소 래퍼 (따라서 스텁과) 기능에 액세스 할 수 있습니다. 따라서 구성 요소의 저장 기능을 테스트하려면 다음을 수행하십시오

const wrapper = shallow(<Comp />) 
sinon.stub(wrapper.instance(), 'save') 
wrapper.find('.btn-header').simulate('click') 
expect(wrapper.instance().save).to.have.been.called 

주, 나는 에 대한 sinon-차이이 구문을 .to.have.been.called 사용하고 있습니다.