I have a super simple form I'm trying to test with react testing library

The form is like

import React, { useState } from 'react';
import './App.css';

function App() {

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div className="App">
      <form>
        <label htmlFor="email">Email</label>
        <input 
          type="email" 
          id="email" 
          name="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <label htmlFor="password">Password</label>
        <input 
          type="password" 
          id="password" 
          name="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </form>
    </div>

  );
}

export default App;

And simple trying to test the input with

test('should be able to type an email', () => {
  render(<App />)
  const emailInput = screen.getByRole('textbox', {name: /email/i})
  userEvent.type(emailInput, '[email protected]')
  expect(emailInput.value).toBe('[email protected]')
})

But this errors at emailInput.value saying

Property 'value' does not exist on type 'HTMLElement'.

I'm using typescript in the app, is this to do with types. How can I fix this

CodePudding user response：

const emailInput = screen.getByRole<HTMLInputElement>('textbox', {name: /email/i}) should work in your case