4

親の小道具から派生したコンテキストを受け取る getChildContext() メソッドと子を持つコンポーネントがあります。

彼らがそれを受け取ったことをどのようにテストしますか?

コンポーネントのコードは次のとおりです...いくつかのタブコンポーネント。

The tab:

function _handleTabChange(eventKey, id, tabsChange, e) {
  e.preventDefault();
  tabsChange({ id, eventKey });
}

const _Tab = ({ eventKey, children, ...props }, { activeKey, parentContainer, tabsChange }) => (
  <li className={classNames('b-tab', { active: eventKey === activeKey })} {...props}>
    <a href="#"
      role="tab"
      data-toggle="tab"
      onClick={_handleTabChange.bind(this, eventKey, parentContainer, tabsChange)}>
      {children}
    </a>
  </li>
);

The Tab Container:

class _TabContainer extends Component {

  static displayName = 'TabContainer'

  static propTypes = {
    children: PropTypes.node.isRequired,
    tabsAddContainer: PropTypes.func.isRequired,
    tabsRemoveContainer: PropTypes.func.isRequired,
    tabsChange: PropTypes.func.isRequired,
    tabs: PropTypes.object.isRequired,
    tabContainerID: PropTypes.string,
  }

  static childContextTypes = {
    parentContainer: PropTypes.string.isRequired,
    tabsChange: PropTypes.func.isRequired,
    activeKey: PropTypes.number.isRequired,
  }

  constructor(props) {
    super(props);
    this.clones = Children.map(this.props.children, (element, eventKey) => {
      if (element.props.active) {
        this.defaultActive = eventKey;
      }
      console.log("defaultActive", this.defaultActive);
      return cloneElement(element, { eventKey });
    });
  }

  getChildContext() {
    const { tabContainerID, tabsChange, tabs } = this.props;
    //activeKey is tabs[tabContainerID] unless it hasn't been instantiated, in which case
    //it is the defaultActive gathered by mapping over Tabs to find one with an active prop
    const activeKey = (tabs && tabs[tabContainerID] && tabs[tabContainerID] !== '') ?
      tabs[tabContainerID] :
      this.defaultActive;
    return {
      parentContainer: tabContainerID,
      activeKey,
      tabsChange,
    };
  }

  componentWillMount() {
    const { tabContainerID, tabsAddContainer } = this.props;
    if (tabContainerID) {
      tabsAddContainer({ tabContainerID, defaultActive: this.defaultActive });
    }
  }

  componentWillUnmount() {
    const { tabContainerID, tabsRemoveContainer } = this.props;
    if (tabContainerID) {
      tabsRemoveContainer(tabContainerID);
    }
  }

  defaultActive = 0;

  render() {
    const { children, tabsChange, ...restProps } = this.props;
    return (
      <div {...restProps} className='tab-container'>
        <ul className='nav nav-tabs nav-default' role='tablist'>
          {this.clones}
        </ul>
      </div>
    );
  }
}

4

1 に答える 1

3

実際には、これは必要ありません。子が実際に適切なコンテキストで終了したかどうかを確認してコンテキストをテストする代わりに、getChildContext() を信頼して、それが期待されるデータを返すかどうかをテストするだけで済みます。

このために、必要なロジックを返す関数を作成し、その関数をテストします。これは getChildContext() で呼び出されます。

于 2015-11-20T14:29:33.437 に答える