React Testing Library userEvent.type recognizing only the first letter
I'm using "@testing-library/user-event": "^14.2.0" with Next.js 12.
Here is my test
it('test search input', async () => {
const searchInput = screen.getByPlaceholderText('Search assets');
expect(searchInput).toBeInTheDocument();
await userEvent.type(searchInput, 'test{Enter}');
expect(searchInput).toHaveValue('test');
Test fails with below error
expect(element).toHaveValue(test)
Expected the element to have value:
test
Received:
t
195 |
196 | await userEvent.type(searchInput, 'test{Enter}');
> 197 | expect(searchInput).toHaveValue('test');
| ^
198 | });
199 | });
200 |
UPDATE: Here is my component code. Component is very simple with an input box with onKeyDown event.
const SearchBox = () => {
const router = useRouter();
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const element = event.currentTarget as HTMLInputElement;
const searchText = element.value;
if (event.key === 'Enter') {
router.push({
pathname: '/search',
query: { q: searchText },
});
}
};
return (
<>
<input
className={styles.searchInput}
type="text"
placeholder="Search assets"
onKeyDown={handleKeyDown}
/>
</>
);
};
export default SearchBox;
Can someone please help?
Comments
Post a Comment