0

テストしようとしている onClick メソッドが呼び出されるステートレスな反応コンポーネントがあります。

私がやっている方法は、本番環境で呼び出されるメソッドを指すデフォルト値でプロップを設定することです。これにより、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

  });

4

1 に答える 1

0

これは、onClick 呼び出しの .bind に関係していました。解決策は、sinon スタブを受け入れるように props を編成することでしたが、他のすべてのプロダクション ケースでは、デフォルトで _handleTabChange 関数を呼び出すようにしました。

これは、handleTabChange が関数を返さなければならないことを意味していました。

これで、テストで sinon.stub が正しく登録され、本番環境では .bind を必要とせずに _handleTabChange が呼び出されます。

于 2015-12-01T20:15:19.610 に答える