4. Testing Library

키워드

• Jest

• Describe-Context-It 패턴

• React Testing Library

Jest

자바스크립트 테스팅 라이브러리

기존의 자바스크립트 테스트를 위해서는 Mocha나 Jasmin을 Test Runner로 사용하고, Chai나 Expect와 같은 Test Matcher를 사용하고, Sinon과 Testdouble 같은 Test Mock 라이브러리도 필요했지만 Jest는 하나의 라이브러리에서 모든 것을 제공

Descibe - Context - It

https://johngrib.github.io/wiki/junit5-nested/

• Describe : 테스트 대상 설명

• Context : 테스트 대상이 놓인 상황 설명

  • with 또는 when으로 시작

• It : 테스트 대상의 행동 설명

Describe - Context - It 패턴의 장점

• 테스트 코드를 계층 구조로 만들어 줌

• 테스트 코드를 추가하거나 읽을때 스코프 범위만 신경쓰면 됨

• 빠뜨린 테스트 코드를 찾기 쉬움

main.test.ts

function add(x: number, y: number): number {
  return x + y;
}

describe('add 함수', {} => {
  it('returns sum of two numbers', () => {
    expect(add(1, 2)).toBe(3);
  });
});

React Testing Library

• 테스트를 렌더링 할 때 React 컴포넌트의 인스턴스가 아닌 실제 DOM 노드를 사용

• CRA에 내장되어 있음

• UI 테스트에 특화되어있음