Jest Coverage for this.ref.getBoundingClientRect

Question

我在此选项卡组件中遇到问题。我试图掩盖它，但无济于事。下面是组件

class Tabs extends React.PureComponent {
  getTabsRef = (tabsRef) => (this.ref = tabsRef);
  handleTabIndicatorChange = ({ left, value, width }, isInitialMount) => {
    if (value !== this.props.value || isInitialMount) {
      this.props.onChange(value, left, width);
    }
  }
  renderTabs() {
    const { tabs, value } = this.props;
    return tabs.map((tab, index) => {
      return (
        <Tab
          key={index}
          label={tab.label}
          isActive={value === tab.value}
          value={tab.value}
          onChange={this.handleTabIndicatorChange}
        />
      );
    });
  }
  render() {
    let left = 0;
    let width = 0;
    const { indicatorLeft, indicatorWidth } = this.props;
    if (this.ref) {
      const rect = this.ref.getBoundingClientRect();
      left = indicatorLeft - rect.left;
      width = indicatorWidth;
    }
    return (
      <StyledTabs className='tabs-wrapper' ref={this.getTabsRef}>
        <ul key='tabs' className='material-tabs'>
          {this.renderTabs()}
        </ul>
        <TabIndicator key='indicator' left={left} width={width} />
      </StyledTabs>
    );
  }
}
Tabs.propTypes = {
  indicatorLeft: PropTypes.number,
  indicatorWidth: PropTypes.number,
  onChange: PropTypes.func,
  tabs: PropTypes.array,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
};
Tabs.defaultProps = {
  onChange: Function.prototype,
  tabs: [],
  value: 0,
  indicatorLeft: 0,
  indicatorWidth: 0,
};
export default Tabs;

我遇到问题的代码块是渲染中的 if 语句。我目前认为可行的测试如下：

  it('should set indicator based on ref', () => {
    const props = getProps();
    const wrapper = shallow(<Tabs {...props} />);
    wrapper.instance().getTabsRef(ref);
    expect(wrapper.instance().ref).toBe(ref);

任何帮助将不胜感激。我认为这与它是裁判有关，但我不确定我错过了什么。

Answer 1

我能够通过将其添加到测试末尾来解决此问题。

    wrapper.setProps({ value: 0, indicatorLeft: 10, indicatorWidth: 100 });
    expect(wrapper).toMatchSnapshot();