userEvent.type recognizing only the first letter

[vasanthi-d]

I'm using "@testing-library/user-event": "^14.2.0".

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 |

Can someone please help?

[ph-fritsche]

You'll probably need to provide your component code if you want someone to help fixing it.

[vasanthi-d]

@ph-fritsche thank you for your response. My component is very simple with one single input box.

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;

[ph-fritsche]

This is an uncontrolled input and there is no obvious reason why this should fail. This might be some handler added outside of this component.
You can try reproducing the issue in Codesandbox by adding more of your code and you might stumble over the culprit. You can use this as a starting point