Test React Bestätigungsfenster mit Enzym

Question

Ich habe eine Schaltfläche in React, die ein einfaches Bestätigungsfenster öffnet, wenn der Benutzer darauf klickt. Bevor ich die Bestätigungsmethode hinzugefügt habe, war der folgende Test grün. Nach dem Hinzufügen der Bestätigung ist es rot. Wie muss ich den Test ändern, um mit der zusätzlichen Bestätigung arbeiten zu können?

Reagieren Schaltfläche Löschen:

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

Hier ist der Test (mit Enzym):

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

Sie confirmsinon.stub mit Stummel können.

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