почему текст не соответствует в реакции?

Question

Я пытаюсь написать test case из functional component. Я просто пишу, если есть обязательное поле, оно покажет required text. Но мой тест не пройден, почему

it("get text of required field", () => {
    wrapper.setProps({
      error: {
        olmIdError: true
      }
    });
    console.log(wrapper.find(FormHelperText).text());
    expect(wrapper.find(FormHelperText).text()).toEqual("Required..!!");
  });

вот мой код

https://codesandbox.io/s/43k6lw60x

компонент

 <Input
            error={error.olmIdError || apiError}
            id="olm-id"
            type="text"
            value={olmId}
            classes={{
              root: classes.inputRoot,
              focused: classes.focusedLabel,
              underline: classes.underlineInput
            }}
            placeholder="Enter OLM ID"
            onChange={handleChange("olmId")}
          />
          {error.olmIdError ? (
            <FormHelperText error={error.olmIdError} id="weight-helper-text">
              {MESSAGES.REQUIRED}
            </FormHelperText>
          ) : null}

Получение ошибки

Expected value to equal:
  "Required..!!"
Received:
  "<WithStyles(WithFormControlContext(FormHelperText)) />"

  44 |       }

Answer 1

Тест пройден, если вы измените утверждение на

expect(wrapper.find(FormHelperText).children().text()).toEqual("Required..!!");

Вот код , работающий .

.text () возвращает визуализированный текст текущего дерева. Вывод немного странный, потому что текущее дерево FormHelperText отрендерено. При первом вызове .children() дерево становится просто текстом Required..!!.