리액트에서 테스트는?

https://legacy.reactjs.org/docs/testing.html

 

위의 내용을 이해한 바탕으로 예시를 적용해 이해해보자.

 

테스트 개요

리액트 컴포넌트를 테스트하는 방법은 크게 두 가지로 나눌 수 있다.

 

1. 컴포넌트를 간단한 테스트 환경에서 실행하고 결과를 확인하기

- 예시 : 로그인 폼 컴포넌트를 테스트할 때, 사용자가 입력한 이메일과 비밀번호가 제대로 표시되는지 확인하는 것

 

2. 실제 브라우저 환경에서 전체 앱을 실행하기 (E2E Test)

- 예시 : 사용자가 로그인 버튼을 클릭했을 때, 홈페이지로 잘 이동하는지를 테스트하는 것

 

 

선택할 때 고려할 점

테스트 도구를 선택할 때 몇 가지 중요한 점을 생각해야 한다.

 

1. 변경 속도 vs 현실적인 환경

- 예시 : Jest를 사용하면 코드를 변경 후 바로 결과를 확인할 수 있지만, 실제 브라우저에서 테스트할 때는 여러 환경 요인 때문에 시간이 더 걸릴 수 있다.

 

2. 얼마나, 어디까지 모의 테스트를 할 것인가

- 예시 : 폼 컴포넌트를 테스트할 때, 내부의 버튼도 함께 테스트해야 할지, 아니면 버튼을 별도로 테스트해야 할지 고민할 수 있다. 만약 버튼이 바뀌면 폼 테스트가 실패할 수 있기 때문이다. 

 

 

추천 도구

1. Jest

- 자바스크립트 테스트 실행기다. jsdom을 통해 DOM에 접근할 수 있다.

- jsdom은 브라우저의 동작을 완벽하게 구현하지는 않지만, 리액트 컴포넌트를 테스트하기에는 충분히 좋다.

- 빠른 피드백과 강력한 기능(모듈 모킹, 타이머 제어 등)을 제공한다.

- 예시 : Jest를 사용해 사용자가 로그인할 때 입력한 값을 확인하는 테스트를 작성할 수 있다.

test('로그인 버튼 클릭 시 입력 값 확인', () => {
    // Mocking the input values
    const email = 'test@example.com';
    const password = 'password123';
    // Test logic here...
});

 

2. React Testing Library

- 리액트 컴포넌트를 구현 세부 사항에 의존하지 않고 테스트할 수 있게 도와주는 도구이다.

- 이렇게 하면 리팩토링(코드 구조 변경)이 쉬워지고, 접근성에 대한 최선의 실천을 유도한다.

- 자식 컴포넌트를 제외하고 "얕게" 렌더링하는 방법은 제공하지 않는다.( 즉, 컴포넌트 내부에 어느 한 부분만 테스트하고 싶지만 안에 자식 컴포넌트들까지 렌더링함 ) 그러나 Jest와 함께 사용하면 모킹을 통해 가능하다.

- 예시 : React Testing Library를 사용해 로그인 폼이 올바르게 렌더링되는지 테스트할 수 있다.

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

test('이메일 입력란이 화면에 보인다', () => {
    render(<LoginForm />);
    const emailInput = screen.getByLabelText(/이메일/i);
    expect(emailInput).toBeInTheDocument();
});