효소를 사용하는 반응 확인 창

Question

사용자가 클릭 할 때 간단한 확인 창이 열리는 React에 버튼이 있습니다. 확인 방법을 추가하기 전에 아래의 테스트가 녹색이었습니다. 추가 후 빨간색임을 확인합니다. 추가 확인 작업을하려면 테스트를 어떻게 변경해야합니까?

이 삭제 버튼 반응 :

describe('<DeleteButton />',() => { 
    it("deletes the entry",() => { 
    const onDelete = sinon.spy(); 
    const props = {id: 1, onDelete: onDelete}; 
    const wrapper = shallow(<DeleteButton {...props} />); 
    const deleteButton = wrapper.find(Button); 

    deleteButton.simulate("click"); 
    expect(onDelete.calledOnce).to.equal(true); 
    }); 
}); 

Answer 1

넌 sinon.stub를 사용 confirm 스터브 수

여기

const DeleteButton = (props) => { 
    const handleDelete =() => { 
    if(confirm("Are you sure?")) { 
     props.onDelete(props.id) 
    } 
    }; 

    return (
     <Button className="btn" onClick={handleDelete}> 
     <i className="fa fa-trash-o"></i> 
     </Button> 
); 
}; 

는 (효소를 사용하여) 검사한다.

describe('<DeleteImportButton />',() => { 
    it("simulates delete event",() => { 
    const onDeleteImport = sinon.spy(); 
    const props = {id: 1, onDelete: onDeleteImport}; 
    const wrapper = shallow(<DeleteImportButton {...props} />); 
    const deleteButton = wrapper.find(Button); 

    const confirmStub = sinon.stub(global, 'confirm'); 
    confirmStub.returns(true); 
    deleteButton.simulate("click"); 
    expect(confirmStub.calledOnce).to.equal(true); 
    expect(onDeleteImport.calledOnce).to.equal(true); 

    confirmStub.restore(); 
    }); 
});