Блог

Я пытаюсь написать test case of 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 |       }
  

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

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

Вот работающий Codesandbox.

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