Question

所以我有一个显示一些文本字段的组件。一个输入，一个选择，并根据用户在该选择上使用的输入（选择的值）显示或不显示第三个。

我正在尝试使用React-Test-Renderer仅测试第一个输入字段，但是我收到以下错误：应该是1个，但发现2个实例的节点类型为：“ undefined”

这是输入字段代码：

    <div>
      <div className="container">
        <h3 className="h3">Info</h3>
        <div className="row">
          <div className="col">
            <label htmlFor="test">test:</label>
            <input
              id="myID"
              value={aPropThatIsAnEmptyString}
              type="text"
              className={`form-control form-control-sm ${style.fieldsGap}`}
              onChange={e => setTest(e.target.value)}
              placeholder="test"
            />
          </div>
          <div className="col">
            <label htmlFor="ddlType">test2:</label>
            <select
              id="SelectId"

这是我的测试代码：


 it("test input field", () => {
    const newProps = {
      something: initialState,
      dispatch: reducer
    };
    const component = TestRenderer.create(
      <ContextBR.Provider value={{ ...newProps }}>
        <ComponentWithTheFields/>
      </ContextBR.Provider>
    );
    const rootInstance = component.root;
    console.log(rootInstance);
    const inputField = rootInstance.findByType("input");

    inputField.props.onChange({ target: { value: "" } });
    expect(inputField.props.value).toBe("");

    inputField.props.onChange({ target: { value: "blue" } });
    expect(inputField.props.value).toBe("blue");
  });

如果您想知道ContextBR.Provider是什么，我们使用上下文而不是redux。

我的错误消息：应该是1个，但发现2个实例的节点类型为：“ undefined”



  29 |     const rootInstance = component.root;
  30 |     console.log(rootInstance);
> 31 |     const inputField= rootInstance.findByType("input");
     |                                   ^
  32 | 
  33 |     inputField.props.onChange({ target: { value: "" } });
  34 |     expect(inputField.props.value).toBe("");

我先试着没有<ContextBr.Provider包装的广告，但是这使我Dispatch为null或未定义。这可能是因为我也没有发送上下文，组件也使用了它。

我期望它找到输入，并断言它的值是否是我发送的输入值“”。之后，我的目标是添加重复代码，而不是发送“”而不是发送“ blue”（仅作为示例），然后对此进行断言。

我正在尝试测试用户体验。他可以在上面输入文字，并显示他正在输入的文字。

Answer 1

从documentation

testInstance.findByType（）

使用提供的类型查找单个后代测试实例。如果没有一个具有提供的类型的测试实例，它将引发错误。

我的猜测是，您的组件中隐藏了多个输入字段，导致findByType（）引发错误。

您可以使用

选择输入字段之一

rootInstance.findAllByType("input")[index]

（我不确定React为什么会说类型是不确定的，但是findAllByType（）仍然对我有用）

rootInstance.findByType（“ input”）;给期望值1，但发现2个实例的节点类型为：“未定义”

1 个答案: