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.