unit-testing - 如何在 react 组件的子组件中模拟 e.preventDefault

Question

嘿，我不知道如何在 React 组件的子组件中模拟内联函数

我的堆栈: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() ？我怎样才能 mock 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); //will be fine if we remove e.preventDefault()
  });

测试输出错误:

TypeError: Cannot read property 'preventDefault' of undefined

Answer 1

试试这个

link.simulate('click', {
  preventDefault: () => {
  }
 });