2022-05-27

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?



No comments:

Post a Comment