Found multiple elements by: data-testid” 오류 해결하기

제목: React Testing Library에서 발생하는 “Found multiple elements by: data-testid” 오류 해결하기

React Testing Library를 사용하고 있다면, 컴포넌트를 테스트하는 과정에서 “Found multiple elements by: data-testid”라는 귀찮은 오류 메시지를 마주칠 수 있습니다. 이 오류는 테스팅 라이브러리가 지정된 data-testid 속성과 일치하는 여러 개의 요소를 발견했을 때 발생합니다.

문제 파악하기

당신의 경우, 오류 메시지는 data-testid 속성이 “show_more_button”으로 설정된 버튼을 클릭하여 “더 보기” 동작을 실행하려고 할 때 트리거됩니다. showComments 함수는 올바르게 호출되지만, 이어지는 fireEvent.click()은 “comment-show-more”라는 data-testid 속성을 가진 여러 개의 요소를 발견했다는 오류 메시지를 트리거합니다.

가능한 원인

이 오류가 발생하는 몇 가지 이유가 있을 수 있습니다:

1. 코드가 의도치 않게 여러 번의 클릭 이벤트를 발생시킬 수 있습니다.
2. showMoreComments 함수에서 사용하는 filterComments 배열에 여러 개의 항목이 포함되어 있을 수 있습니다.
3. CommentList 컴포넌트가 “comment-show-more”라는 data-testid 속성을 가진 div 요소를 여러 번 렌더링할 수 있습니다.

해결 방법: getAllByTestId 사용하기

이 문제를 해결하기 위해, React Testing Library에서 제공하는 getAllByTestId 쿼리를 사용할 수 있습니다. 이 쿼리는 단일 요소 대신 일치하는 요소의 배열을 반환합니다. 쿼리 뒤에 인덱스 [0]을 붙여 특정하게 상호작용하려는 요소를 대상으로 할 수 있습니다.

it("더 보기 동작을 실행해야 합니다", () => {
  const { getAllByTestId, getByTestId } = render();
  const showMore = getAllByTestId("show_more_button")[0];

  fireEvent.click(showMore);
  expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
});

여러 개의 클릭 이벤트 방지하기

위의 해결 방법이 작동하지 않고 클릭 이벤트가 여러 번 발생하는 것으로 의심되는 경우, React Testing Library의 테스팅 유틸리티에서 제공하는 cleanup 함수를 활용할 수 있습니다. cleanup 함수는 각 테스트 전에 기존의 DOM 요소를 제거하여 잠재적인 원하지 않는 부작용을 방지합니다.

import { cleanup } from '@testing-library/react';

describe("를 렌더링해야 합니다", () => {
  afterEach(cleanup)
  // 여러분의 테스트
});

결론

React Testing Library를 사용하여 작업할 때, “Found multiple elements by: data-testid” 오류가 발생하는 것은 귀찮을 수 있습니다. 그러나 getAllByTestId 쿼리를 사용하고 최선의 방법을 따르면 원하는 요소와 신뢰할 수 있는 테스트 결과를 얻을 수 있습니다. 또한 cleanup 함수를 활용해 의도치 않은 여러 개의 클릭 이벤트를 방지하고 안정적인 테스트 결과를 보장할 수 있습니다.

위에서 언급한 해결 방법을 구현함으로써 “Found multiple elements by: data-testid” 오류를 효과적으로 해결하여 React Testing Library를 사용한 원활하고 정확한 테스트 환경을 구성할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/62088161/fireevent-is-calling-found-multiple-elements-by-data-testid-error-in-react-test

같은 카테고리의 다른 글 보기 :

reactjs