Question

我有一个无状态的反应组件，它有一个我试图测试的onClick方法被调用。

我这样做的方法是设置一个prop，其默认值指向将在生产中调用的方法，以便我可以通过sinon.stub（）在我的测试中测试click事件。

所以这一切都很好。存根被调用。我知道这是因为我在存根中添加了.returns(console.log("called"));并在控制台中看到了这个打印。

但是当谈到expect(onClickStub).to.have.been.called时，我的测试未能说它没有被调用。

我的代码涉及一个无状态组件，所以我用一个快速的TestWrapper类来包装它以进行测试。我不确定上下文是如何运作的，但我不认为这对测试是完全必要的。

这一切都是：

＆＃13;

function _handleTabChange(eventKey, id, tabsChange, e) {
  e.preventDefault();
  tabsChange({ id, eventKey });
  console.log("clicked");
}

const _Tab = ({ onClick = _handleTabChange, eventKey, children, ...props }, { activeKey, parentContainer, tabsChange }) => (
  <li className={classNames('b-tab', { active: eventKey === activeKey })} {...props}>
    <a href="#"
      role="tab"
      data-toggle="tab"
      onClick={onClick.bind(this, eventKey, parentContainer, tabsChange)}>
      {children}
    </a>
  </li>
);

  

it('onclick event', () =>{

    const props = {
      tabsAddContainer : sinon.spy(),
      tabsRemoveContainer : sinon.spy(),
      tabsChange : sinon.stub(),
      tabs : {},
      tabContainerID : 'company-management-tabs',
      onClick: sinon.stub.returns(console.log("HELLO")),
    }
    const onClickStub = sinon.stub.returns(console.log("HELLO"));
  
    class TestWrapper extends React.Component {
      render() {
        return <Tab {...props} {...context} />
      }
    }

    const renderTab = TestUtils.renderIntoDocument(
        <TestWrapper onClick={onClickStub} tabsChange={props.tabsChange} active={true} context={{tabsChange: function(){}, parentContainer:"parent-container"}}/>
    )

    const tabElements = TestUtils.scryRenderedDOMComponentsWithTag(renderTab, "a");
    console.log("tabElements", tabElements);
    TestUtils.Simulate.click(tabElements[0], {});
    
    expect(onClickStub).to.have.been.called

  });

＆＃13;

Answer 1

嗯，这与onClick调用中的.bind有关。解决方案是组织道具来接受一个sinon存根，但在所有其他生产情况下，默认调用_handleTabChange函数。

这意味着handleTabChange必须返回一个函数。

现在它正确地在测试中注册sinon.stub，并在生产中调用_handleTabChange而不需要.bind。

Sinon.stub在测试中调用，但期望被调用语句失败

1 个答案: