Tester la fenêtre de confirmation de React en utilisant l'enzyme

Question

J'ai un bouton dans React qui ouvre une simple fenêtre de confirmation lorsque l'utilisateur clique dessus. Avant que j'ajoute la méthode de confirmation, le test ci-dessous était vert. Après avoir ajouté la méthode de confirmation, il est rouge. Comment dois-je modifier le test pour qu'il fonctionne avec la confirmation supplémentaire ?

Bouton de suppression React :

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

Voici le test (en utilisant l'enzyme) :

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

Vous pouvez stub confirm en utilisant sinon.stub .

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