[React] React 테스팅

🎯 React 테스팅

📝 코드 테스트가 필요한 경우

• 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해
• 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해
• 코드를 리팩토링 하면, 원래대로 동작하는지 테스트를 한다.
• 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. → 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다.

 

📝 테스팅 코드 작성의 이점

• 테스팅 코드를 작성하여, 미연의 에러를 방지할 수 있다.
• TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상할 수 있다.
  • 리팩토링 할 때 용이하다.
• 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다.
• 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높일 수 있다.

 

📝 테스터블한 코드 작성하기

• 코드가 영향을 미치는 범위를 최대한 줄인다. ⇒ 사이드 이펙트를 줄인다.
• 하나의 함수가 너무 많은 일을 하지 않게 한다.
• 기능들을 작게 분리하여 테스트 코드를 작성하도록 한다.

 

📝 주요 테스팅 용어

• Mocking : : 특정 동작을 흉내 내는 것.
  • ex) 실제 API를 호출하는 게 아니라, 가짜 payload를 반환하는 mocking function을 만든다.
• Stubbing : 더미를 채워 넣는 것.
  • ex) Child 컴포넌트를 렌더링 하지 않고, 대신 그 자리에 <div> 등을 채워 넣음.

 

📝 테스팅의 구성

const transformUser = (user) => {
    const { name, age, address } = user
    return [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'])
})

• setup : 테스트하기 위한 환경을 만든다. mock data, mock function 등을 준비한다.
• expectation : 원하는 테스트 결과를 만들기 위한 코드를 작성한다.
• assertion : 정말 원하는 결과가 나왔는지를 검증한다.

 

📝 React 화이트박스 테스팅, 블랙박스 테스팅

• 화이트박스 테스팅은 컴포넌트 내부 구조를 미리 안다고 가정하고 테스트 코드를 작성한다.
• 블랙박스 테스팅은 컴포넌트 내부 구조를 모른 채 어떻게 동작하는지에 대한 테스트 코드를 작성한다.

 

📝 Unit Testing

• 다른 부분과 분리된 작은 코드를 만들고 그것을 테스트한다.
• 작은 코드는 function, module, class 등을 의미한다.
• 각 부분이 원하는 대로 동작함을 보장하기 위함이다.
• 테스트는 서로 분리되어야 한다.
• ex) 특정 컴포넌트가 데이터에 따라 잘 렌더링 되는지를 테스트하는 경우.

 

📝 Integration Testing

• 앱의 특정 부분이 동작하는지 테스트한다.
• ex) 여러 컴포넌트가 한꺼번에 동작하거나, 어떤 페이지의 부분이 잘 동작하는지를 테스트하는 경우
• ex) react-router, redux 등이 특정 컴포넌트와 함께 잘 동작하는지를 테스트하는 경우

 

📝 End-to-end Testing(e2e)

• 유저가 어떤 시나리오를 가지고 그 시나리오의 end-to-end로 잘 동작하는지 테스트한다.
• 필요한 경우 웹서버, 데이터베이스를 실행한다.
• 범위가 너무 넓어서 에러가 발생했을 때 특정 기능이 안 된다는 것은 알 수 있지만, 정확히 어떤 부분에 문제가 생겼는지는 알기 힘들다.
• ex) 유저가 회원가입 후, 로그인하여 유저 정보 페이지를 볼 수 있는지 테스트하는 경우