У меня проблемы с отображением строк здесь в этом компоненте вкладок. Я пытался покрыть это, но безрезультатно. Ниже приведен компонент
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);Любая помощь будет оценена по достоинству. Я думаю, что это как-то связано с тем, что он рефери, но я не уверен, что мне не хватает.
@marshy101 интересно! Есть идеи, как это исправить?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я смог исправить это, добавив это в конец теста.
wrapper.setProps({ value: 0, indicatorLeft: 10, indicatorWidth: 100 });
expect(wrapper).toMatchSnapshot();
Я думаю, это потому, что вы используете неглубокий рендеринг, поэтому внутренние компоненты, такие как `<StyledTabs className='tabs-wrapper' ref = {this.getTabsRef}>`, не отображаются, поэтому
this.getTabsRefне вызывается, и вот почемуthis.refне установлен, и если условие оценивается как ложное, поэтому этот блок не выполняется в ваших тестах.