60 :: 테스팅, TDD, React 테스팅, jest

엘리스 SW 엔지니어 트랙 60일차

온라인 강의날

 

 

테스팅 코드

 

테스팅 코드 작성 이점

TDD 방법론 적용해서 생산성 향상

테스트 코드가 구현 코드에 대한 문서화가 된다

코드 품질과 신뢰성을 높인다

 

 

TDD에 대해

Test Driven Development의 약자

테스트 코드를 먼저 작성하는 방법론이다

 

1. 버튼을 만들기 전에
2. 버튼 동작 테스트 코드를 미리 만들어 놓는다
3. 그럼 실패하겠지
4. 그런다음 버튼 개발을 해서 성공으로 만든다

 

 

'testable code'란?

테스터블한 코드

코드가 영향을 미치는 범위와 사이드 이펙트를 줄인다

기능들을 작게 분리한다

 

 

React 테스트 이유

컴포넌트 많아지면 서로 영향 미치는 경우가 생긴다

특정 코드 수정되면 에러가 생길 수 있다

 

 

테스팅 용어

Mocking - 특정 동작 흉내내기

예시) 실제 API 호출이 아니라, 가짜 payload 반환, mocking function 만든다

Stubbing - 더미 채우기

 

 

테스팅 구성

• setup: 테스트 환경 구성. mock data, mock function 등 준비
• expectation: 원하는 결과 위한 코드 작성
• assertion: 원하는 결과 나왔는지 검증

 

테스팅 사용 예시

// 객체를 배열로 바꾸는 함수 테스트
test('Test transformUser', () => {
  // setup
  const mockUser = { name: 'testName', age: 20, address: 'testAddress'}
  
  // expectation
  const result = transformUser(mockUser)
  
  //assertion
  expect(result).toBe(['testName', 20, 'testAddress'])
})

 

 

화이트박스 테스팅 | 블랙박스 테스팅

화이트박스 테스팅

내부 구조 안다고 가정하고 테스팅

 

블랙박스 테스팅

내부 구조 모른 채 어떻게 동작하는 지 테스트

 

 

테스팅 범위

Unit 테스팅

분리된 작은 코드(function, module, Component 등)

각 부분 원하는 대로 동작함 보려고

테스트끼리 분리한다

예시) 특정 컴포넌트가 데이터에 따라 잘 렌더링되는지 테스트

 

Intergration 테스팅

앱 특정 부분이 동작하는지 테스트

예시) 여러 컴포넌트 함께 동작, 어떤 페이지 부분

 

End to end 테스팅

시나리오에 따라 처음부터 끝까지 동작하는지 확인

특정 기능이 안되는 것 확인 가능

But, 어떤 부분이 안되는지 알기 힘들다

예시) 회원가입 => 로그인 => 유저 정보 페이지 확인

 

 

jest

메타(전: 페이스북)가 만든 오픈소스 테스팅 프레임워크(인기 많다)

create-react-app에서 기본적으로 사용된다

assertion 함수들, test runner, mock 라이브러리 등 모두 제공

 

핵심 기능

• assertion macthers: toBe, toEqual
• async assertion: async/await
• mock functions
• testing lifecycle functions
• grouping: describe()
• snapshot testing

 

Assertion Matchers

toBe: 같은지

toMatch: 부분이 맞는지

toContain: 포함 하는지

not.toContain: 포함 안하는지

 

 

react-testing-library

테스트가 소프트웨어가 사용되는 모습을 닮은수록

테스트를 더욱 신뢰할 수 있다

 

 

TDD 개발 방식에 대해서는 아직 와닿지가 않는다

다음에 필요시 다시 알아보자