How to fire onChange event and get the result JestJS - reactjs

Question

I have an input in one of my classes which onChange updates some of the properties, according to what the user typed. So I want to call that input, give it a value, then it should go through the onChange method and then get the result from one of the properties. Here is my test case
it("test-input-value-1", async () => {
const { getByTestId } = render(
<>
<Home />
<Try typeracertext="dsa dsa"/>
</>
);
const input = getByTestId("add-word-input");
const inputWord = "For";
userEvent.type(input, 'For')
const userText = await getByTestId("userText");
const typeracertext = getByTestId("typeracertext");
await expect(userText.innerHTML).toBe(inputWord);
});
and here is what I got
I don't have an idea why the result is empty when it has to be changed into the same word "For" that the input has.
EDIT: Here is the JSX Code as requested
Home.js:
const Game = () => {
if (cantType === false) {
return (
<Try
typeracertext={typeracertext}
setWholeText={setWholeText}
setStartTyping={setStartTyping}
setEndTyping={setEndTyping}
setCountWords={setCountWords}
newGame={newGame}
/>
)
}
else {
return (
<input readOnly />
)
}
}
return (
<span data-testid="userText" className="userTextHome">{wholeText}</span><div data-testid="typeracertext">
</div>
<div data-testid="add-word-input2" className="box d">
{Game()}
</div>
...
Try.js:
//here is also the onChange method but it is not needed in this case as it is very long and I have explained what it does in the end (make a property to be equal to the input data)
return (
<div data-testid="add-word-input"><input name="add-word-input" placeholder="Message..." onChange={onChange}></input> </div>
);

Answer 1

You are executing user event on the div element, instead of input element.
Try moving attribute data-testid to input element in Try.js file:
return (
<div><input data-testid="add-word-input" name="add-word-input" placeholder="Message..." onChange={onChange}></input> </div>
);
Working example: Codesandbox
Input.js:
import { useState } from "react";
export const Input = () => {
const [text, setText] = useState();
const handleChange = (e) => {
setText(e.target.value);
};
return (
<>
<div>
<input
data-testid="add-word-input"
name="add-word-input"
placeholder="Message..."
onChange={handleChange}
></input>
</div>
<label data-testId="test-label">{text}</label>
</>
);
};
Input.test.js:
import { render } from "#testing-library/react";
import userEvent from "#testing-library/user-event";
import "#testing-library/jest-dom";
import { Input } from "./Input";
describe("Input", () => {
it("should change", async () => {
const { getByTestId } = render(<Input />);
let input = getByTestId("add-word-input");
expect(input).not.toBe(null);
await userEvent.type(input, "for");
let label = getByTestId("test-label");
expect(label.textContent).toBe("for");
});
});