containsMatchingElement возвращает false, когда компонент реагирования содержит функцию

Question

У меня есть дочерний компонент, который содержит метод в качестве реквизита. Этот дочерний компонент отображает Radio Group. Когда я нажимаю эти переключатели, основываясь на значении радио, отображается другой компонент. У меня две проблемы.

1. Я не могу вызвать метод поддержки дочерних компонентов (setSeverityLevel)
2. containsMatchingElement () возвращает false, даже если отладка показывает доступный компонент.

import * as React from "react";
import { SelectSeverityLevel } from "components/Common/SelectSeverityLevel";
import Sev1Confirmation from "../Sev1Confirmation";

interface State {
  issueSummary: string;
  description: string;
  createIncidentRequested: boolean;
  selectedSeverity: TicketSeverityEnum;
  errorMessage: JSX.Element;
}

export class TechnicalSRCreate extends React.Component<Props, State> {
    constructor(props: Props) {
    super(props);
    this.state = {
      issueSummary: undefined,
      description: undefined,
      createIncidentRequested: false,
      selectedSeverity: "HIGH",
      errorMessage: undefined
    };
  }
  private sev1Confirmation = (): JSX.Element => {
    return (
      <Sev1Confirmation 
        checked={this.props.sev1Confirmed}
        confirm={(value: boolean) => {
          this.props.setSev1Confirmed(value);
        }}
      />);
  }
  private onSelectSeverity = (value: string): void => {
    console.log("onSelectSeverity>>>");
    console.log(value);
    this.props.setSeverity(value as TicketSeverityEnum);
  }

  private internalRender(): JSX.Element {
    return (
        <>
        <SelectSeverityLevel
          defaultSeverity={this.props.severity}
          fieldName={SeverityLevelFieldName}
          setSeverityLevel={this.onSelectSeverity}
        />
        {this.props.severity === "HIGHEST" ? 
          this.sev1Confirmation()
        : null}
        </>
    )
  }

  public render(): JSX.Element {
    return (
        <>
        <Form>
            .....
            <div>{this.internalRender()}</div>
        </Form>
        </>

    )
  }
}
export default TechnicalSRCreate;

что мне здесь не хватает?

Answer 1

Мелкий рендер не предназначен для этих целей, цитируя docs :

Мелкий рендеринг полезен, чтобы ограничить себя тестированием компонента как модуля и убедитесь, что ваши тесты не косвенно утверждают о поведении дочерних компонентов.

Вы должны использовать mount(...) вместо этого, чтобы протестировать поведение потомков и родителей. Кроме того, хорошее правило - всегда проверять компоненты, используя mount вместо shallow, так как последний позволяет вам сломать ваше приложение без неудачных тестов; и поддержание приложения должно быть долгосрочным стремлением. Подробнее об этом здесь