3

所以我有一个显示一些文本字段的组件。一个输入，一个选择，基于用户在该选择上使用的输入，（选择的值）第三个是否显示。

我尝试使用 React-Test-Renderer 仅测试第一个输入字段，但出现以下错误：预期 1 但找到 2 个节点类型为：“未定义”的实例

这是输入字段代码：

    <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 个节点类型为：“未定义”的实例



  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 为空或未定义。这可能是因为我也没有发送上下文并且组件使用它。

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

我正在尝试测试用户体验。他可以在上面打字，而且它显示了他正在输入的内容。

4

1 回答 1

4

从文档

testInstance.findByType()

使用提供的类型查找单个后代测试实例。如果提供的类型不完全是一个测试实例，则会抛出错误。

我的猜测是您的组件中隐藏了多个输入字段，导致 findByType() 抛出错误。

您可以通过使用选择一个输入字段

rootInstance.findAllByType("input")[index]

（我不确定为什么 React 说类型未定义，但 findAllByType() 仍然对我有用）

于 2019-08-07T18:32:30.203 回答