[Test Code] queryByText, findByText, getByText

queryByText, findByText, getByText의 차이점

getByText, findByText, queryByText는 모두 react-testing-library 패키지에서 제공하는 함수로, 특정 텍스트를 가진 요소를 찾는 데 사용됩니다. 그러나 각 함수는 약간 다른 동작과 사용 사례를 가지고 있습니다.

 

1. getByText: 동기적으로 요소를 찾는 함수입니다. 특정 텍스트를 가진 요소를 찾으면 해당 요소를 반환하고, 요소를 찾을 수 없는 경우에는 오류를 발생시킵니다. 주로 컴포넌트가 렌더링된 후에 특정 요소를 즉시 찾아야 하는 경우에 사용됩니다. 만약 요소가 없을 경우 테스트가 실패합니다.

   import { render, screen } from '@testing-library/react';
   
   test('특정 텍스트가 포함된 요소를 찾기', () => {
     render(<MyComponent />);
   
     const element = screen.getByText('특정 텍스트');
     expect(element).toBeInTheDocument();
   });
   
   

    
2. findByText: 비동기적으로 요소를 찾는 함수입니다. 특정 텍스트를 가진 요소를 찾을 때까지 기다리며, 요소를 찾으면 해당 요소를 반환합니다. 이 함수는 Promise를 반환하므로 **await를 사용하여 비동기적으로 대기**해야 합니다. 만약 요소가 발견되지 않을 경우에는 타임아웃이 발생합니다.

   import { render, screen } from '@testing-library/react';
   
   test('특정 텍스트가 포함된 요소를 비동기적으로 찾기', async () => {
     render(<MyComponent />);
   
     const element = await screen.findByText('특정 텍스트');
     expect(element).toBeInTheDocument();
   });
   
   

3. queryByText: 동기적으로 요소를 찾는 함수이며, getByText와 달리 요소를 찾을 수 없는 경우 null을 반환합니다. 오류를 발생시키지 않기 때문에 조건문 등으로 요소의 존재 여부를 확인할 수 있습니다. 요소가 없을 경우 테스트가 실패하지 않습니다.

   import { render, screen } from '@testing-library/react';
   
   test('특정 텍스트가 포함된 요소를 찾기', () => {
     render(<MyComponent />);
   
     const element = screen.queryByText('특정 텍스트');
     expect(element).toBeInTheDocument(); // element가 null이 아니어야 함
   });
   
   

따라서, getByText은 동기적으로 요소를 찾고, findByText는 비동기적으로 요소를 찾아야 하는 경우에 사용됩니다. queryByText는 요소의 존재 여부를 확인하는 용도로 사용될 수 있습니다. 선택한 함수는 테스트 시나리오 및 요구사항에 맞게 적절하게 사용해야 합니다.