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

IT技术 unit-testing reactjs mocha.js sinon enzyme
2021-05-21 12:25:04

嘿，我不知道如何在 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()？我怎么能嘲笑一个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
4个回答

试试这个 

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

 test('simulates click events', () => {
    const e = { stopPropagation: jest.fn() };
    const component = shallow(<ListItem{...props} />);
    const li = component.find('li').at(0).childAt(0)
    li.props().onClick(e)

    expect();
  });

请注意，这仅是使用shallow酶渲染器时的问题。在完整的 DOM 渲染器的情况下mount，事件对象包含该preventDefault方法，因此您不必模拟它。

对于那些使用 Jest 和@testing-library或react-testing-librarys 的人fireEvent，您需要提供一个初始化的事件对象，否则无法通过您的元素调度该事件。

然后可以e.preventDefault通过为该初始化事件分配一个属性来断言被调用：

test('prevents default on click', () => {
  const {getByText} = render(<MyComponent />);
  const button = getByText(/click me/);

  // initialise an event, and assign your own preventDefault
  const clickEvent = new MouseEvent('click');
  Object.assign(clickEvent, {preventDefault: jest.fn()});

  fireEvent(button, clickEvent);

  expect(clickEvent.preventDefault).toHaveBeenCalledTimes(1);
});

对于stopPropagation.

Anton Karpenko对 Jest的回答很有用。

其它你可能感兴趣的问题
上一篇ABS底部变形怎么解决？ 下一篇如何在 ReactJS 中定义常量