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

问题描述

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

I don't really know how to mock inline function in react component's child

我的堆栈:sinon，chai，enzyme;

组件使用情况:

<ListItem onClick={() => someFn()} />

组件的渲染:

render() {
    return (
      <li>
        <a href="#" onClick={e => {
            e.preventDefault();
            this.props.onClick();
          }}
        > whatever </a>
      </li>
    );
  }

在这里，我们有一个调用e.preventDefault()的onClick函数.如何告诉<a href>(link)不要调用e.preventDefault()?如何模拟onClick?

Here we have an onClick function that calls e.preventDefault(). How to tell to <a href>(link) not to call e.preventDefault()? How can I mock an onClick?

以下是我在测试中尝试过的内容:

Below is what I have tried in tests:

浅拷贝设置

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

这篇关于如何在React组件的子对象中模拟e.preventDefault的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！