Как проверить компонент, который отображает HOC или макет HOC в этом компоненте?

Question

У меня есть компонент HOC.

const SectionComponent = (ComponentToWrap) => {
  return function ComponentToWrapWithLoading({...props}) {
    const { isLoading, isLoaded, icon, title } = props;
    if (!isLoading && isLoaded ) 
      return (
        <div>
          <SectionHeading icon={icon} title={title} />
          <ComponentToWrap {...props} />
        </div>
      );
    if (isLoading) 
      return (<Loader />);
    return null;  
  };
};

export default SectionComponent;

что я использую в компоненте реакции:

import React, {Component} from 'react';
import SectionComponent from '../../UI/section/Section'
import { faDumbbell} from '@fortawesome/free-solid-svg-icons';
import TableWrapper from '../../UI/table/Table-wrapper';

const SectionLoadingComponent = SectionComponent(TableWrapper);

export class TrainingsList extends Component {


  componentDidMount() {
    const {fetchTrainings} = this.props;
    fetchTrainings();
  }

  getTableColumns() {
   ...
  }

  render() {
    const { isLoading, isLoaded, data } = this.props.trainings;
    const columns = this.getTableColumns();
    return(
      <div> 
        <SectionLoadingComponent 
          isLoading={isLoading} 
          isLoaded={isLoaded} 
          title='Lista ćwiczeń'
          icon={faDumbbell}
          data={data}
          columns={columns}
          />
      </div>
    );
  }

}

Моя проблема в том, что я не знаю, как смоделировать SectionLoadingComponent в модульном тесте. Я пытался использовать реагировать на тестирование, но компонент не рендерится. Буду очень признателен за некоторые советы и подсказки.

Answer 1

вопрос

Вопрос в этой строке:

const SectionLoadingComponent = SectionComponent(TableWrapper);

С этой настройкой нельзя издеваться SectionLoadingComponent так как это оценивается, когда TrainingsList импортируется, и его значение всегда используется для визуализации каждого экземпляра. Даже пытаясь издеваться над ним SectionComponent() ничего не делает с тех пор SectionLoadingComponent к тому времени уже был создан любой код для насмешек.

Решение

Вместо звонка SectionComponent() в TrainingsListпозвони в Table-wrapper и экспортировать результат.

Затем используйте экспорт из Table-wrapper прямо в render() из TrainingsList,

С помощью этой настройки вы можете издеваться над экспортом Table-wrapper в ваших юнит-тестах и ​​когда render() из TrainingsList работает он будет использовать макет.