我真的不知道如何在React组件的子对象中模拟内联函数
我栈:sinon,chai,enzyme,
sinon
chai
enzyme
组件用法:
<ListItem onClick={() => someFn()} />
组件的渲染:
render() { return ( <li> <a href="#" onClick={e => { e.preventDefault(); this.props.onClick(); }} > whatever </a> </li> ); }
在这里,我们有一个onClick调用的函数e.preventDefault()。如何告诉<a href>(link)不要打电话e.preventDefault()?我该如何嘲笑一个onClick?
onClick
e.preventDefault()
<a href>
link
以下是我在测试中尝试过的方法:
浅拷贝设置
function setup() { const someFn = sinon.stub(); const component = shallow( <ListItem onClick={() => { someFn(); }} /> ); return { component: component, actions: someFn, link: component.find('a'), listItem: component.find('li'), } }
和测试
it('simulates click events', () => { const { link, actions } = setup(); link.simulate('click'); //Click on <a href> expect(actions).to.have.property('callCount', 1); //would be good if we'll remove e.preventDefault() });
测试的输出错误:
TypeError: Cannot read property 'preventDefault' of undefined
试试这个
link.simulate('click', { preventDefault: () => { } });