React TDD

React Testing Library

  React Testing Library는 에어비앤비에서 만든 Enzyme을 대처하는 솔루션으로, 리액트 컴포넌트를 테스트하는 가벼운 솔루션입니다. Enzyme은 구현 주도 테스트(Implementation Driven Test)인 반면에, React Testing Library는 행위 주도 테스트(Behavior Driven Test)입니다.

 

  React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축됩니다. DOM Testing Library란 DOM 노드(Node)를 테스트하기 위한 가벼운 솔루션입니다.

 

  Create React App으로 생성된 프로젝트는 React Testing Library를 기본적으로 지원합니다. 그렇지 않은 경우 다음 명령어를 통해 추가할 수 있습니다.

npm install --save-dev @testing-library/react

 

Jest

  Jest란 FaceBook에 의해서 만들어진 테스팅 프레임워크입니다. 최소한의 설정으로 동작하며 Test Case를 만들어서 애플리케이션 코드가 잘 돌아가는지 확인합니다. 단위 테스트(Unit Test)를 위해서 이용합니다.

 

Jest 라이브러리 설치

  Create React App으로 생성된 프로젝트는 기본적으로 Jest를 지원합니다.

npm install jest --save-dev

 

  Jest는 다음의 구조를 가진 파일들을 찾아 테스트합니다.

• {filename}.test.js
• {filename}.spec.js
• All files inside "tests" folders

 

Jest 파일 구조 및 사용법

describe("Sample Code", () => {
  test('two plus two is four', () => {
    expect(2 + 2).toBe(4);
  });
  test('two plus two is not five', () => {
    expect(2 + 2).not.toBe(5);
  });
});

• describe: argument(name, fn) 여러 관련 테스트를 그룹화하는 블록입니다.
• test (it): argument(name, fn, timeout) test와 it은 같습니다. 개별 테스트를 수행하는 곳으로 각 테스트를 작은 문장처럼 설명합니다.
• expect: matcher와 함께 값을 테스트할 때 사용됩니다. 
• matcher: 다른 방법으로 테스트 하도록 matcher를 사용합니다.

 

쿼리 함수

  쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법입니다. 여러 유형의 쿼리("get", "find", "query")가 있습니다.

• getBy...: 쿼리에 대해 일치하는 노드를 반환하고, 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 오류를 발생시킵니다(둘 이상의 요소가 예상되는 경우 대신 getAllBy 사용). 
• queryBy...: 쿼리에 대해 일치하는 노드를 반환하고, 일치하는 요소가 없으면 null을 반환합니다. 둘 이상의 일치 항목이 발견되면 오류가 발생합니다(queryAllBy 사용).
• findBy...(getBy + waitFor): 주어진 쿼리와 일치하는 요소가 발견되면 Promise를 반환합니다. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 약속이 거부됩니다(둘 이상인 경우 findAllBy 사용).

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z