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, 'test@email.com')
expect(emailInput.value).toBe('test@email.com')
})
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
const emailInput = screen.getByRole<HTMLInputElement>('textbox', {name: /email/i})
should work in your case