为什么文本不匹配？

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..!!");

这里是Codesandbox working。

.text()返回当前树的渲染文本。输出有点奇怪，因为当前树是FormHelperText浅层渲染。首先调用.children()会使树成为Required..!!文本。