React Testing Library: Screen vs Render Queries

소개

react-testing-library를 사용할 때, 쿼리를 사용하는 두 가지 방법이 있습니다: render 메서드에서 반환된 쿼리를 사용하거나 @testing-library/react 라이브러리에서 제공하는 screen 객체를 사용하는 방법입니다. 이 블로그 포스트에서는 이 두 가지 옵션을 비교하고 권장되는 접근 방식에 대해 설명하겠습니다.

Render 메서드 쿼리

@testing-library/react의 render 메서드는 getByText 또는 queryByRole과 같은 다양한 쿼리 메서드를 포함한 객체를 반환합니다. 이러한 쿼리는 렌더링된 컴포넌트 내에 캡슐화된 특정 DOM 요소에 작동합니다.

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

// 컴포넌트 렌더링
const { getByText } = render(

);

// 쿼리 사용
expect(getByText('Foo')).toBeInTheDocument();

Screen 객체 쿼리

@testing-library/dom에서 제공하는 screen 객체는 쿼리에 접근하는 더 간단한 대안을 제공합니다. screen 객체를 사용할 때 쿼리는 자동으로 요소에 바인딩됩니다. 이를 통해 객체를 분해할 필요가 없어져 코드를 더 깔끔하게 유지할 수 있습니다.

import React from 'react';
import { render, screen } from '@testing-library/react';

// 컴포넌트 렌더링
render(

);

// 쿼리 사용
expect(screen.getByText('Foo')).toBeInTheDocument();

권장되는 접근 방식: Screen

react-testing-library의 저자인 Kent C. Dodds의 최신 권장은 screen 객체를 사용하는 것입니다. 이는 코드를 단순화하고 쿼리가 변경될 때 객체 분해를 업데이트할 필요성을 없애 줍니다.

권장 방식 중 하나의 예외는 컨테이너나 baseElement를 설정하는 경우입니다. 이 경우는 특정 사용 사례가 아니면 피하는 것이 좋습니다. 이러한 옵션은 주로 역사적인 이유로 존재하며 테스트 과정을 복잡하게 할 수 있습니다.

screen 객체를 사용함으로써 에디터의 자동 완성 기능을 활용할 수 있으므로 테스트 코드를 더 관리하기 쉽고 오류가 적은 상태로 유지할 수 있습니다.

react-testing-library의 일반적인 실수에 대한 자세한 정보는 Kent C. Dodds의 블로그 포스트를 참조하세요.

결론

이 블로그 포스트에서는 react-testing-library를 사용하여 쿼리를 사용하는 두 가지 접근 방식인 render 메서드 쿼리와 screen 객체를 살펴보았습니다. 두 가지 옵션 모두 효과적으로 작동하지만 Kent C. Dodds는 쉬움과 개발자 경험을 개선하기 위해 screen 객체를 사용할 것을 권장합니다. 이 접근 방식을 따라 테스트 코드를 간소화하고 유지 가능하게 만들 수 있습니다.

screen과 render 쿼리 중 어떤 것을 선택할지는 특정 요구에 따라 다릅니다. 자유롭게 실험하고 테스트 요구 사항에 가장 적합한 방식을 찾아보세요!

참고 자료 :

https://stackoverflow.com/questions/61482418/react-testing-library-screen-vs-render-queries

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

reactjs