[React] Jest Query 사용 방법 비교, render vs screen

안녕하세요. J4J입니다.

 

이번 포스팅은 Jest에서 Query 사용을 할 수 있도록 도와주는 render와 screen을 비교해 보는 시간을 가져보려고 합니다.

 

 

 

Jest Query 사용이란?

 

Testing Library 공식 문서를 확인해보시면 알겠지만 jest에서 말하는 query 사용은 페이지에 존재하는 다양한 element들을 테스트하기 위한 용도로 조회할 수 있도록 도와주는 함수들을 의미합니다.

 

예를 들어, 특정 text를 포함하고 있는 element들을 조회하거나 특정 class를 포함하고 있는 element들을 조회할 때 활용되는 것들이 query입니다.

 

 

 

jest에서 많은 분들이 사용하는 query 사용 방법은 크게 2가지가 있는 것으로 보입니다.

 

첫 번째는 컴포넌트를 불러올 때 render 함수를 활용하는데 이때 사용되는 render 함수의 결괏값을 활용하는 것입니다.

 

두 번째는 testing library에서 제공해 주는 screen 함수를 활용하는 것입니다.

 

 

 

두 방식에 대한 차이점에 대해 설명을 해보자면 크게 차이 나는 것은 없다는 것이 개인적인 결론입니다.

 

render나 screen을 활용하여 사용해볼 수 있는 기능들은 거의 차이가 없으며 이 말은 웬만한 기능들을 사용할 때는 둘에 대한 차이점을 경험할 수 없다는 의미이기도 합니다.

 

이 외에는 작성되는 코드에서 차이가 있을 수 있는데 screen 함수 같은 경우는 기본적으로 render 함수가 사용되기는 해야 합니다.

 

하지만 반대로 render 함수를 활용할 땐 screen 함수가 사용될 필요는 없습니다.

 

 

 

이 글을 읽으시는 분들은 "그래서 무엇을 사용하라는 소리야?" 라는 생각을 해보실 수 있기에 조금 더 추가적인 의견을 작성해 보겠습니다.

 

먼저 Testing Library Query 사용 공식 문서를 확인해 보면 screen 함수에 대한 사용을 추천하고 있습니다.

 

링크를 들어가 보면 여러 내용들이 작성되어 있지만 결국에 testing library 쪽에서 말하고 싶은 것은 "어차피 테스트 document.body 기준으로 작성하지 않냐?" 라고 저는 해석이 되었습니다.

 

그럴 거면 render 함수에 대한 container 값을 반환받아 사용하지 말고 그냥 screen 함수 바로 가져다 활용하라는 것 같습니다.

 

 

 

 

개인적인 경험을 비추어 보더라도 지금까지 컴포넌트와 관련된 테스트 케이스를 작성할 땐 항상 document.body를 기준으로 작성하기는 했습니다.

 

왜냐하면 실제로 테스트에 필요한 컴포넌트들만 렌더링 하여 테스트를 했기 때문에 동일한 테스트 케이스 내부에서 특정 컴포넌트들만을 위한 테스트는 작성할 필요가 없었기 때문입니다.

 

그래서 저도 screen 함수를 지금까지 계속 사용해오고 있고 시간이 지나더라도 그대로 계속 활용할 것이라고 생각되기는 합니다.

 

 

 

하지만 만약 여기서 render 함수에 대한 container 값을 반환하여 사용하는 게 편하다고 생각되시는 분들은 개인적인 생각에 맞게 그대로 활용하시면 될 것 같습니다.

 

위의 내용들은 screen이 더 좋은 것처럼 적어놓았지만 결론적으로 screen이 더 좋다고 말하는 얘기는 아니기에 꼭 screen을 사용해야만 한다고 생각하지 않습니다.

 

다만, render와 screen 중 어떤 것을 활용하는 것이 더 좋을지에 대해 고민하고 계신 분들이 있다면 위의 내용들을 근거로 하여 screen의 사용을 권장드리기는 합니다.

 

 

반응형

 

 

사용성 비교

 

render와 screen을 활용하여 query를 사용할 때 어떻게 코드로 작성되는지 간단한 예시를 작성해 보겠습니다.

 

// src/header.tsx
export default function Header() {
    return (
        <div>
            <h2 data-testid="header-text">Header !!</h2>
        </div>
    );
}



// src/footer.tsx
export default function Footer() {
    return (
        <div>
            <p data-testid="footer-text">Footer !!</p>
        </div>
    );
}

 

 

 

위의 코드들은 따로 설명하지 않아도 어떤 화면이 그려질지에 대한 것은 대부분 생각하실 수 있을 것 같고, 이를 기반으로 header와 footer가 렌더링 될 때 올바르게 텍스트들이 보이는지 다음과 같이 테스트 코드를 작성해 볼 수 있습니다.

 

import { render, screen } from '@testing-library/react';
import Footer from './footer';
import Header from './header';

describe('app test', () => {
    test('render query test', () => {
        const headerUtil = render(<Header />);
        const footerUtil = render(<Footer />);

        expect(headerUtil.getByTestId('header-text')).toBeInTheDocument();
        expect(footerUtil.getByTestId('footer-text')).toBeInTheDocument();
    });

    test('screen query test', () => {
        render(<Header />);
        render(<Footer />);

        expect(screen.getByTestId('header-text')).toBeInTheDocument();
        expect(screen.getByTestId('footer-text')).toBeInTheDocument();
    });
});

 

 

 

코드를 확인해 보면 render와 screen을 사용할 때 서로 큰 차이가 없는 것을 바로 확인해 볼 수 있습니다.

 

그리고 해당 소스를 이용하여 테스트를 돌려보면 다음과 같이 테스트는 올바르게 동작하는 것을 볼 수 있습니다.

 

render, screen 테스트 코드 결과

 

 

 

 

여기서 한 가지 더 보고 싶었던 것은 render를 이용하면 굳이 하나의 테스트 케이스에서 header와 footer를 구분하여 테스트를 할 수 있을 것 같다는 생각이 있었습니다.

 

그래서 테스트 코드를 다음과 같이 footer값을 header를 이용하여 테스트하도록 수정하고 돌려봤는데 결과는 저의 생각과 다르게 올바르게 동작했습니다.

 

혹시나 궁금하셨던 분들은 참고하시면 될 것 같습니다.

 

import { render } from '@testing-library/react';
import Footer from './footer';
import Header from './header';

describe('app test', () => {
    test('render query test', () => {
        const headerUtil = render(<Header />);
        render(<Footer />);

        expect(headerUtil.getByTestId('header-text')).toBeInTheDocument();
        expect(headerUtil.getByTestId('footer-text')).toBeInTheDocument();
    });
});

 

render 변경 코드 테스트 결과

 

 

 

 

 

 

 

 

이상으로 Jest에서 Query 사용을 할 수 있도록 도와주는 render와 screen을 비교해 보는 것에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.