Итак, у меня есть компонент, который показывает некоторые текстовые поля.Один вход, один выбор и на основе ввода, который пользователь использует для этого выбора, (значение выбора) третий отображается или нет.
Я пытаюсь использовать 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 илине определено.Вероятно, потому, что я тоже не отправлял контекст, и компонент использует его.
Я ожидал, что он найдет ввод и подтвердит, что его значение совпадает с тем, которое я отправил, "".После этого я стремился добавить дублирующий код, вместо того, чтобы отправлять "", а скорее отправлять "синим" (просто в качестве примера), а затем утверждать об этом.
Я пытаюсь проверить пользовательский опыт.Что он может печатать на нем и что он показывает, что он печатает.