rootInstance.findByType(“input”); Giving Expected 1 but found 2 instances with node type : “undefined”

Question

So I have a component that shows some text fields. One input, one select and based on the input the user uses on that select, (The value of the select) the third is shown or not.

Im trying to use React-Test-Renderer to test the first input field only, but Im getting the following Error: Expected 1 but found 2 instances with node type: "undefined"

Here is the input field code:

    <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" 

Here is my test code:

 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");
  });

IF you're wondering what ContextBR.Provider is, we used context instead of redux.

My error message: Expected 1 but found 2 instances with node type: "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("");

I tried ad first without the <ContextBr.Provider wrapping but that gave me Dispatch is null or undefined. Which is probably because I didnt send the context too and the component uses it.

I was expecting it to find the input, and assert if its value is at the one I sent in, "". After that I was aiming at adding duplicate code just instead of sending in "" rather send in "blue " (just as an example) then assert on that.

Im trying to test user experience. That he can type on it and that it shows what he's typing.

Answer 1

From the documentation

testInstance.findByType()

Find a single descendant test instance with the provided type. If there is not exactly one test instance with the provided type, it will throw an error.

My guess is that you have more than one input field hidden in your component, causing findByType() to throw an error.

You can pick one of the input fields by using

rootInstance.findAllByType("input")[index] 

(I'm not sure why React says the type is undefined, but findAllByType() still works for me)