React Testing Library

기능 개발에 바뻐 테스트 코드작성에 미흡했던 모습들을 반성하면서 React Component릍 테스트 할 수 있는 RTL에 대하여 글을 남깁니다. 모든 기능들에 대한 설명을 할 수 없기에 키워드를 기본으로 알아보도록 하겠습니다.

상세한 강의 내용은 RTA을 하면 좋을 것 같습니다.

Jest 기본 기능 학습하기

Jest watch mode

Jest는 기본적으로 watch 모드로 실행합니다. watch 모드를 통해 현재 작성하는 테스트에 대한 빠른 테스트 결과를 확인 할 수 있습니다.

Filter & Group Test

only, skip을 사용하여 테스트를 선택적으로 실행 할 수 있습니다. describe을 통해 테스트를 그룹핑 할 수 있습니다.

Assertion

테스트에 사용할 다양한 Matchers를 학습합니다. 먼저 기본적으로 사용되는 Jest matcher을 학습하고 추후에 jest-dom에서 추가되는 matcher들을 추가로 학습해야합니다.

Code Coverage

프로젝트 전체의 테스트 커버리지를 확인합니다. coverage을 확인하기 위해 coverage을 확인할 확장자를 정의해야 하며 제외합니다. 또한 coverageThreshold 설정을 통해 목표 테스트 커버리지를 설정하여 안정성을 높일 수 있습니다. 더 많은 옵션은 Jest Configuraion을 참고바랍니다.

package.json
...
"jest": {
    "collectCoverageFrom": [
      "src/components/**/*.{tsx,ts}",
      "!src/**/*.{stories,spec,test}.{tsx,ts}"
    ],
    "coverageThreshold": {
      "./src/": {
        "statements": 100,
        "branches": 80,
        "functions": 100,
        "lines": 80
      }
    }
  }
...

RTL

Queries in RTL

dom에서 객체를 자유롭게 선택하여 css를 적용하듯이 객체를 선택 할 수 있는 쿼리를 학습니다. 이 쿼리들에는 우선순위가 있으며 사이트에 정의된 최상단에 있는 정의되어 있는 ByRole을 최우선적으로 선택하고 최후의 수단으로 ByTestId를 사용합니다.

크롬 확장 프로그램인 testing playground을 설치하여 퀴리를 선택하는 부분에 있어 큰 도움을 받을 수 있습니다.

getBy, queryBy & findBy

키워드	설명
`getBy`	무조건 rendering 되는 객체를 선택할 때 선택
`queryBy`	조건부로 rendering 되는 객체를 선택할 때 선택
`findBy`	비동기로 로딩되는 객체를 선택할 때 사용

상세내용은 문서 참고

debug test

screen.debug dom tree를 출력합니다.
logRoles dom tree를 role을 기준으로 출력합니다.

Testing with Interaction

아래와 같은 코드로 별도의 라이브러리가 필요로 합니다.

npm install --save-dev @testing-library/user-event

모든 interaction은 비동기로 처리됩니다.

fireEvent & user-event 차이

fireEvent는 단일 DOM event를 발생시키는 반면 user-event 는 실제 유저가 행동하는것과 같이 여러 이벤트를 발생시킵니다. 특별한 경우가 아닌 경우 user-event를 통해 테스트하는 것이 권장되며 실제 유저가 행동 했을 때 상황을 테스트 할 수 있습니다.

Testing with Mock Api

Mocking Funtion with Jest

Jest에 있는 Mock function을 학습합니다. 해당 mock function의 호출여부,횟수 및 반환 값들을 확인 할 수 있습니다.

Mocking http request with MSW

msw 라이브러리를 통해 REST API 또는 graphQL API를 테스트 할 수 있습니다. 핸들러를 작성하여 실제 api의 반환값을 설정하여 가짜 API로 Component 를 Unit test 할 수 있습니다.

Siri