기초부터 완성까지 프런트엔드, 13장 테스트

테스트의 종류

크게 단위 테스트, 통합 테스트, E2E 테스트 그리고 시작적 회귀 테스트로 나눌 수 있다.

단위 테스트

• 가장 기본적인 테스트
• 단일 함수의 결괏값 또는 클래스나 컴포넌트의 상태나 행위를 검증
• 다른 요소와의 상호작용을 검증하기보다는 각 요소의 동작을 독립적으로 검증하는 테스트
• 핵심 코드만 검증하는 것이 좋다
  • 외부에 인터페이스로 노출되는 코드 (즉 외부에서 public 하게 사용되는 코드)
  • 중요한 연산을 처리하는 코드
• private 메서드 테스트는 지양하는 것이 좋다

통합 테스트

• 일부 개별 요소들이 조합되었을 때 올바르게 동작하는지 확인
• 최대한 적게 '모킹'하는 것이 좋다.
• 어떠한 행위에 의해 모든 컴포넌트(요소)의 상태가 올바르게 변경되는가

E2E 테스트

• 전체 워크 플로우를 검증하는 테스트
• 애플리케이션을 진짜 사용자가 사용하는 것처럼 시나리오를 작성하여 검증하는 것

jest

• 페이스북에서 만든 자바스크립트 테스팅 프레임워크
• 검증을 실행하는 매처(matcher)와 모킹에 필요한 API들을 대부분 제공, 별도의 라이브러리와 결합하지 않아도 쉽게 테스트 작성
• Node.js환경에서 테스트를 실행하기 때문에 브라우저처럼 DOM에 접근하거나 조작하는 것은 불가능하다.
  • jest는 이를 위해 jsdom이란 환경을 제공한다.
    • jset에서도 브라우저와 동일하게 모든 DOM API를 호출하여 검증할 수 있다.

---

describe(), it(), test()

• jest test 코드는 it 함수 내에 작성하며, 테스트에 대한 설명과 테스트 코드를 함수 내에 작성한다.
  • it함수는 test함수로 대체하여 작성 가능.
  • 테스트의 설명을 명확하게 작성하는 것은 테스트 코드의 가독성에 매우 중요하다.
• describe 함수는 여러 개의 테스트를 그룹화하는 블록을 생성한다.
  • 동일한 범주에 속한 여러 테스트를 그룹화하면 어떤 범주에서 테스트를 실행하는지 파악 쉽다.
  • 그룹 내의 테스트들이 실행되기 전과 후에 처리할 공통 작업도 쉽게 처리 가능하다.

---

매처

• 값이 특정 조건을 만족하는지 검증할 수 있는 일종의 집합이며, jest에서는 expect() 함수를 사용하여 매처를 실행할 수 있다.

toBe()

• 원시 값의 일치 여부를 확인하거나 객체의 참조를 확인

toEqual()

• toBe 처럼 값의 일치 여부를 확인하지만 객체의 경우 참조를 확인하는 것이 아니라 모든 프로퍼티의 값을 재귀적으로 비교하여 일치하는지 검증한다.

toHaveBeenCalled()

• spy를 사용하여 특정 함수가 정상적으로 호출되었는지 검증한다. spy는 함수의 호출 횟수와 호출 인자를 기록한다.

toHaveBeenCalledWith()

• toHaveBeenCalled와 유사하지만 함수에 어떠한 인자가 넘어가 실행되었는지 함께 검증한다.

toHaveBeenCalledTimes()

• 함수가 정확히 몇 번 호출되었는지 확인할 수 있다.

toHaveProperty()

• 객체의 특정 키 값에 해당하는 프로퍼티의 값을 확인한다.

toMatch()

• 문자열이 정규식에 대응되는지 확인

toMatchObject()

• 객체 프로퍼티의 하위 집합이 특정 객체와 일치하는지 확인.

toThrow()

• 특정 상황에서 에러가 발생하는지 테스트.

---

Setup과 Teardown

• beforeEach
• afterEach
• beforeAll
• afterAll

---

테스트 더블 (Test Double)

• 더미(Dummy)
  • 객체(또는 함수)가 필요하지만 실제 기능의 실행까지는 필요하지 않은 경우에 사용
• 페이크(Fake)
  • 일부 동작을 정해진 결과로 단순화하여 구현한 것
  • 테스트 과정에서 객체의 주입이 필요할 때 사용한다. 하드 코딩된 결과 값만을 반환하기 때문에 다양한 객체를 다양한 상황에 활용하기는 어렵다.
• 스텁(Stub)
  • 더미 객체가 실제로 동작하는 것처럼 만들어 놓은 것이다.
  • 인터페이스의 일부만 최소한으로 구현한 상태이며 호출될 시 미리 준비해 둔 결과를 반환한다.
  • jest.fn() 함수를 사용하여 간단한 스텁을 만들 수 있다.
• 스파이(Spy)
  • 스텁과 유사하지만 구현된 객체가 어떠한 인자와 몇 번 호출되었는지 확인할 수 있다.
  • jest.spyOn() 과 같은 함수를 사용하여 spy 를 생성할 수 있다.
• Mock
  • 실제 객체와 동일한 동작을 하도록 만들어진 모의 객체이다.
  • 네트워크 통신에 필요한 axios 라이브러리를 대체하는 jest-mock-axios와 같은 라이브러리가 대표적인 예이다.
  • mockAxios는 axios의 네트워크 통신에 필요한 요청, 응답을 모두 대체하며, 이 과정에서의 상황을 기록해두기 때문에 요청 url이나 파라미터를 모두 검증할 수 있다.
  • 모의 객체를 남용하는 것은 테스트 코드의 신뢰성을 떨어뜨릴 수 있다.