rootInstance.findByType ( "вход");Предоставление ожидаемого 1, но найдено 2 экземпляра с типом узла: "неопределенный" - PullRequest
0 голосов
/ 26 июня 2019

Итак, у меня есть компонент, который показывает некоторые текстовые поля.Один вход, один выбор и на основе ввода, который пользователь использует для этого выбора, (значение выбора) третий отображается или нет.

Я пытаюсь использовать 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, мы использовали контекст вместо избыточного числа.

Мое сообщение об ошибке: Ожидается 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 илине определено.Вероятно, потому, что я тоже не отправлял контекст, и компонент использует его.

Я ожидал, что он найдет ввод и подтвердит, что его значение совпадает с тем, которое я отправил, "".После этого я стремился добавить дублирующий код, вместо того, чтобы отправлять "", а скорее отправлять "синим" (просто в качестве примера), а затем утверждать об этом.

Я пытаюсь проверить пользовательский опыт.Что он может печатать на нем и что он показывает, что он печатает.

...