所以我有一个显示一些文本字段的组件。一个输入，一个选择，基于用户在该选择上使用的输入，（选择的值）第三个是否显示。
我尝试使用 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 为空或未定义。这可能是因为我也没有发送上下文并且组件使用它。
我期待它找到输入，并断言它的值是否是我发送的值，“”。之后，我的目标是添加重复代码，而不是发送“”，而是发送“蓝色”（仅作为示例），然后对其进行断言。
我正在尝试测试用户体验。他可以在上面打字，而且它显示了他正在输入的内容。