제목: React Testing Library를 사용하여 올바른 속성으로 컴포넌트가 렌더되었는지 테스트하는 방법
React 컴포넌트를 작업할 때, 예상한 속성으로 올바르게 렌더링되는지 확인하는 것은 매우 중요합니다. 그러나 컴포넌트가 다른 컴포넌트 내에서 렌더링되는 모든 경우를 수동으로 테스트하는 것은 시간이 많이 소요되고 중복적입니다.
이 블로그 포스트에서는 React Testing Library (RTL)를 사용하여 컴포넌트가 올바른 속성으로 렌더링되었는지 테스트하는 다양한 접근 방법을 살펴보겠습니다. 중첩된 컴포넌트를 테스트하는 도전과 RTL의 강력한 테스팅 기능을 사용하여 실용적인 해결책을 제공할 것입니다.
접근 방법 1: Jest를 사용하여 컴포넌트 모킹하기
RTL의 창시자인 켄트 C. 도드는 컴포넌트가 예상한 속성으로 렌더링되는지 테스트하기 위해 Jest의 모킹 기능을 사용하는 것을 제안합니다. 컴포넌트를 모킹하고 올바른 속성으로 호출되었는지 확인함으로써 이 동작을 효율적으로 테스트할 수 있습니다.
import FetchNextPageButton from 'FetchNextPageButton'
jest.mock('FetchNextPageButton', () => {
return jest.fn(() => null)
})
// ... your test에서
expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)
접근 방법 2: 모킹을 통한 속성 유효성 검사
1번 접근 방법과 같이 컴포넌트를 모킹하는 것이 불가능한 경우에도, RTL은 컴포넌트에 전달된 속성을 간접적으로 렌더링된 DOM을 통해 유효성 검사할 수 있는 해결책을 제공할 수 있습니다.
// FetchNextPageButton을 속성으로 렌더링하기 위해 모킹
jest.mock("../../../FetchNextPageButton.js", () =>
(props) => <div data-test-id="FetchNextPageButton" {...props} />);
// ... your test에서
const { getByTestId } = render(<YourComponent />);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("query", NEWS_QUERY);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("path", "viewer.news");
이 접근 방법은 원시적인 속성 값에 대해 효과적으로 작동하지만, 객체나 함수와 같은 복잡한 속성 유형을 유효성 검사하는 것은 더 어려울 수 있습니다. 그러나 이는 가장 일반적인 시나리오를 테스트하기 위한 해결책을 제공합니다.
접근 방법 3: 고차 컴포넌트(HOC) 테스트하기
어떤 경우에는 고차 컴포넌트(HOC)가 올바르게 감싸고 있는 컴포넌트를 제대로 향상시키는지 테스트해야 할 수 있습니다. 이를 위해 실제 컴포넌트를 모킹하고 HOC에 전달할 수 있습니다. 그런 다음, HOC가 추가한 속성을 확인할 수 있습니다.
// HOC에 전달할 컴포넌트 모킹하기
const Component = jest.fn(() => <h1>Tag Zam</h1>);
const WithConstraint = withSelectionConstraint(Component, ["instance"], true);
render(<WithConstraint />);
// HOC가 추가한 속성 확인하기
expect(Component).toHaveBeenCalledWith(
expect.objectContaining({ ids: mockInstanceRows.map(x => x.id) }),
expect.anything()
)
접근 방법 4: 복잡한 컴포넌트를 위한 사용자 정의 모킹
이전의 접근 방법이 복잡한 컴포넌트를 완벽하게 다루지 못하는 경우에는 사용자 정의 모킹 전략을 구현할 수 있습니다. 이 접근 방법은 컴포넌트를 모킹하고 특정 요구 사항에 따라 속성 유효성 검사를 처리하는 사용자 정의 렌더러를 생성하는 것을 포함합니다.
jest.mock(
'path/to/your/component',
() => {
const MockedComponent = (props) => {
const cleanedProps = Object.keys(props).reduce((acc, key) => {
acc[key.toLowerCase()] = props[key].toString();
return acc;
}, {});
return (
<div data-testid="any-test-id" {...cleanedProps} />
);
};
return MockedComponent;
}
);
// jest-dom matchers를 사용하여 다양한 속성 확인하기
expect(getByTestId('any-test-id')).toHaveAttribute('attribute', 'value');
컴포넌트 모킹 접근 방법을 사용자 정의하는 것으로, 복잡한 속성 유효성 검사를 수행할 수 있습니다.
결론
React 애플리케이션의 올바른 동작을 보장하기 위해 컴포넌트가 올바른 속성으로 렌더링되는지 테스트하는 것은 필수적입니다. React Testing Library는 주로 DOM을 대상으로 유효성을 검사하지만, 이 제한을 극복하기 위해 다양한 접근 방법을 살펴보았습니다.
이 블로그 포스트에서는 React Testing Library를 사용하여 컴포넌트가 예상한 속성으로 렌더링되는지 테스트하는 네 가지 다른 접근 방법을 소개했습니다. 이러한 접근 방식에는 컴포넌트 모킹, 렌더링된 DOM을 통한 속성 유효성 검사, 고차 컴포넌트 테스트, 복잡한 컴포넌트를 위한 사용자 정의 모킹 전략이 포함됩니다.
이러한 테스팅 기술을 개발 작업 흐름에 통합함으로써 컴포넌트가 예상대로 렌더링되고 전달된 속성이 올바른지 자신 있게 확인할 수 있습니다.
기억하세요, 테스팅은 소프트웨어 개발의 중요한 측면이며, React Testing Library는 테스트 프로세스를 간소화하기 위한 강력한 도구를 제공합니다.
