Sinon.stub вызывается в тесте, но ожидать вызова оператора не удается

Question

У меня есть компонент реагирования без сохранения состояния, в котором вызывается метод onClick, который я пытаюсь проверить.

Я делаю это, устанавливая реквизит со значением по умолчанию, указывающим на метод, который будет вызываться в рабочей среде, чтобы я мог протестировать событие click в моем тесте с помощью sinon.stub().

Так что это все хорошо. Заглушка вызывается. Я знаю это, потому что я добавил .returns(console.log("called")); на заглушку и увидеть эту распечатку в консоли.

Но когда дело доходит до expect(onClickStub).to.have.been.called мой тест не проходит, говоря, что он не был вызван.

Мой код включает компонент без сохранения состояния, поэтому я добавляю в него быстрый класс TestWrapper для целей тестирования. Я не уверен, как работает контекст, но я не думаю, что это абсолютно необходимо для тестирования.

Вот все это:

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

  });

Answer 1

Ну, это было связано с.bind в вызове onClick. Решение состояло в том, чтобы организовать реквизиты для приема заглушки sinon, но во всех других производственных случаях вызвать функцию _handleTabChange по умолчанию.

Это означало, что handleTabChange должен был возвращать функцию.

Теперь он корректно регистрирует sinon.stub в тесте, а в производственном процессе вызывает _handleTabChange без необходимости.bind.