我在 React 中有一个按钮,当用户单击它时,它会打开一个简单的确认窗口。在我添加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('<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);
});
});
你可以存根confirm
using sinon.stub http://sinonjs.org/docs/#stubs.
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();
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)