Покрытие Jest для this.ref.getBoundingClientRect

У меня проблемы с отображением строк здесь в этом компоненте вкладок. Я пытался покрыть это, но безрезультатно. Ниже приведен компонент

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);

Любая помощь будет оценена по достоинству. Я думаю, что это как-то связано с тем, что он рефери, но я не уверен, что мне не хватает.

Я думаю, это потому, что вы используете неглубокий рендеринг, поэтому внутренние компоненты, такие как `<StyledTabs className='tabs-wrapper' ref = {this.getTabsRef}>`, не отображаются, поэтому this.getTabsRef не вызывается, и вот почему this.ref не установлен, и если условие оценивается как ложное, поэтому этот блок не выполняется в ваших тестах.

marshy101 11.06.2019 00:00

@marshy101 интересно! Есть идеи, как это исправить?

StuffedPoblano 11.06.2019 00:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
349
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я смог исправить это, добавив это в конец теста.

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

Другие вопросы по теме