[React] React 테스팅

 

1. 코드 테스트가 필요한 경우

• 기능 확인: 코드를 작성하고 나면 원하는대로 동작하는지 알기 위해 테스트를 수행한다.
• 버그 확인: 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지 파악할 수 있고 이를 통해 버그를 식별하고 해결할 수 있다.
• 리팩토링 확인: 코드를 리팩토링하면서 원래대로 동작하는지 확인한다.
• 컴포넌트 간 영향 확인: 특히 리액트 앱의 컴포넌트가 많아지면, 각 컴포넌트 간의 상호작용과 영향을 이해는 것이 중요하다. 이를 위해 특정 코드 수정이 다른 컴포넌트에 어떤 영향을 미치는지 확인하기 위해 테스트를 수행한다.

 

2. 테스팅 코드 작성의 이점

미연의 에러를 방지하고, TDD(테스트 주도 개발, Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킬 수 있다.

테스트가 늘어나면 테스트 코드가 구현 코드에 대한 문서화가 되며,

테스트가 용이하게 코드를 작성하여 코드 품질과 신뢰성을 높인다.

 

3. 테스터블한 코드 작성하기

• 코드가 영향을 미치는 범위를 최소화 하고 사이드 이펙트를 최대한 줄이기
• 하나의 함수가 너무 많은 일을 하지 않게 하기
• 기능들을 작게 분리하기

 

4. 테스팅의 구성

1. setup: 테스트하기 위한 환경 만들기. (mock data, mock function 등을 준비)
2. expectation: 원하는 테스트 결과를 만들기 위한 코드를 작성 (버튼을 누르면 모달창이 뜨는지)
3. assertion: 정말 원하는 결과가 나왔는지 검증 (모달창이 나왔을 때 텍스트가 뜨는지)

 

const transformUser = (user) => {
    const { name, age, address } = user;
    return [name, age, address];
}

여기서의 목표는 transformUser 함수가 인자로 받은 user 객체에서 name, age, address 속성을 추출 후 배열로 반환하게 되는지 확인할 수 있다.

 

test('Test transformUser', () => {
    // setup
    const mockUser = { name: 'testName', age: 20, address: 'testAddress' };
    // expectation
    const result = transformUser(mockUser);
    // assertion
    expect(result).toBe(['testName', 20, 'testAddress']);
});

mockUser를 setup하기 위해 mock data 객체를 생성하고,

tranformUser함수가 mockUser 객체를 인자로 넘기면서 result에는 배열이 담겨있게 된다.

assertion 부분에선 실제 함수의 반환값이 예상값과 일치하는지 확인한다.

여기서 result는 ['testName', 20, 'testAddress']와 일치하는지 확인하고 있다.

 

5. 테스팅 범위에 따른 분류

유닛(Unit) 테스팅

다른 부분과 분리된 작은 코드(function, module, class)를 만들고 그것을 테스트하는 것.

각 부분이 원하는 대로 동작함을 보장하기 위함으로 테스트는 서로 분리되어야한다.

ex) 특정 컴포넌트가 데이터에 따라 잘 렌더링되는지를 테스트하는 경우

 

통합(Integration) 테스팅

앱의 특정 부분이 동작하는지 테스트한다.

ex) 여러 컴포넌트가 한꺼번에 동작하거나, 어떤 페이지의 부분이 잘 동작하는지

 

End-to-end 테스팅

유저가 어떤 시나리오를 가지고 그 시나리오의 end-to-end로 잘 동작하는지 테스트

필요한 경우 웹서버, 데이터베이스를 실행한다.

범위가 너무 넓어서 에러가 발생했을 때 특정 기능이 안 된다는 것은 알 수 있지만, 정확히 어떤 부분에 문제가 생겼는지 알기 힘들다.

ex) 유저가 회원가입 후, 로그인하여 유저 정보 페이지를 볼 수 있는지 테스트