Как насмешливо реагировать рефери с шуткой / энзимом?

Question

Я начинаю изучать тестирование приложения, и мне нужно проверить функцию.У меня есть какой-то компонент:

export class Countries extends React.Component<Props, State> {
  private countriesList: React.RefObject<HTMLDivElement> = React.createRef<
    HTMLDivElement
  >();

  public componentDidMount(): void {
    setTimeout(this.whenCDM, 1);
  }


  public render(): React.ReactNode {
    return (
      <div ref={this.countriesList}>
      </div>
    );
  }

  private whenCDM = (): any => {
    if (this.countriesList.current) {
      this.whenComponentDidMount(
        this.countriesList.current.getBoundingClientRect().top
      );
    }
  };
}

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

Answer 1

Я наконец-то нашел ответ.Я просто не понял, что такое "макет".

Вот ответ на мой вопрос:

Сначала.Нужен небольшой рефакторинг функции.

private whenCDM = (countriesList:any): any => {
    if (countriesList.current !== null) {
      this.whenComponentDidMount(
        countriesList.current.getBoundingClientRect().top
      );
    }
};

Затем в cDM:

public componentDidMount(): void {
    setTimeout(this.whenCDM(this.countriesList), 1);
}

Затем создайте фиктивную функцию в тестовом файле: Полагаю, я могу установить только в getBoundingClientRect top опция, но все равно ...

// ...code
it("whenCDM", () => {
    const getCountriesListRef = () => {
      return {
        current: {
          getBoundingClientRect: () => {
            return {
              bottom: 624,
              height: 54,
              left: 15,
              right: 360,
              top: 570,
              width: 345,
              x: 15,
              y: 570
            };
          }
        }
      };
    };

    const instance = wrapper.instance();
    expect(instance.whenCDM(getCountriesListRef()));
  });
// ...code