Property 'value' does not exist on type 'HTMLElement' in React Testing Library

Question

I am using React-testing-library and getting an error on the last line which is: expect (title.value).toBe("testtitle");})}) . The error message is Property 'value' does not exist on type 'HTMLElement'. How can I rectify this error message in order to write this code efficiently?

Testfile

  <Router history={history}>
            <Route render={(props) => 
            <NewQuestion {...props} onSave={jest.fn()}/>}/>
        </Router>)
    const title= getByPlaceholderText("What's your question? Be specific");
    fireEvent.change(title, {target: {value: "testtitle"}})
    expect (title.value).toBe("testtitle");})})

Answer 1

You should cast the title variable to HTMLInputElement to actually be able to have the value property. Try the following code:

const title = getByPlaceholderText("test") as HTMLInputElement;

Answer 2

In my case,

  expect(
    screen.getByLabelText(/barInput/).value,
  ).toEqual('bar value');

throw Error "Property 'value' does not exist on type 'HTMLElement'."

I solved it by just adding generics HTMLInputElement

  expect(
    screen.getByLabelText<HTMLInputElement>(/barInput/).value,
  ).toEqual('bar value');