React에서 testing library의 userEvent 사용했을 때의 해결 (Error: Expected key descriptor but found "" in "")

react 컴포넌트를 테스트하기 위해 테스트 코드를 작성했을 때 한 가지 에러가 발생했다.

● Console
	console.error
  Error: Expected key descriptor but found "" in ""
  See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options
  for more information about how userEvent parses your input.
  
...

작성한 에러 발생 코드

it('does not call onAdd when the habit is empty', () => {
  userEvent.type(input, '');
  userEvent.click(button);

  expect(onAdd).toHaveBeenCalledTimes(0);
});

위와같은 코드를 작성한 이유

input에 사용자가 값을 입력하지 않고, 아이템을 추가하는 함수를 호출하려고 하면
-> 해당 함수가 호출되지 않도록 만든 로직을 테스트하기 위해 위와 같은 코드를 작성했다.

input에 입력값이 '' 빈문자열일 때는 해당 함수의 호출 횟수가 0이어야 되는 테스트 코드를 작성했는데 빈문자열로 값을 넣어서 테스트하려고 했더니 발생한 에러이다.

에러를 해결하기 위해 찾아본 정보

stackoverflow와 testing-library/user-event의 github issue등을 통해 검색해 본 결과

빈 문자열과 같은 잘못된 값에 대한 입력 필드 검증을 할 때 빈 문자열이 키보드 입력으로 변환되지 않고 userEvent.click(element)에 따라 수행될 수 있기 때문에 오류가 발생할 수 있다는 답변을 찾았다.

키 정의로 변환할 수 없는 모든 입력에 대한 값이 오류를 발생시키는 것 같았다.

참고한 github issue 1
참고한 github issue 2

에러 해결 코드

it('does not call onAdd when the habit is empty', () => {
  // userEvent.type(input, '');
  userEvent.clear(input);
  userEvent.click(button);

 expect(onAdd).toHaveBeenCalledTimes(0);
});

참고한 testing library doc

clear() API를 사용하면 편집 가능한 요소를 쉽게 지울 수 있다고 한다.

clear(element: Element): Promise<void>

This API can be used to easily clear an editable element.

• Focus element
• Select all contents as per browser menu
• Delete contents as per browser menu

github issue에서 2번째 참고 주소로 링크를 걸어놓은 곳의 답변에서는 아래의 erase를 이용해서도 테스트 가능하다고 했는데 이 방법은 testing library 버전에 따라 사용여부가 달라지는 것 같다.
userEvent.erase(input);