小编典典

如何在React组件的子对象中模拟e.preventDefault

reactjs

我真的不知道如何在React组件的子对象中模拟内联函数

我栈:sinonchaienzyme

组件用法:

<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

以下是我在测试中尝试过的方法:

浅拷贝设置

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

阅读 206

收藏
2020-07-22

共1个答案

小编典典

试试这个

link.simulate('click', {
  preventDefault: () => {
  }
 });
2020-07-22