[React] Jest

TDD

• 테스트를 먼저 만들고 테스트를 통과하기 위한 것을 짜는 것
• 만드는 과정에서 우선 테스트를 작성하고 그걸 통과하는 코드를 만들고를 반복하면서 제대로 동작하는지에 대한 피드백을 적극적으로 받는 것.

빨강, 녹색 리팩터링

1. 존재하지도 않는 메소드를 호출하는 테스트 코드를 먼저 만든다.
2. 컴파일만 되도록 메소드의 껍질만 만들어서 실행시킨다.
3. jUnit의 빨간 막대가 나타난다.
4. 메소드를 최소한의 코드로 작성, 오로지 녹색 막대를 보겠다는 일념으로 최대한 빠르게 구현한다.
5. 빨간 막대 대신 마음이 편안해지는 녹색 막대가 나타난다.
6. 최선을 다해 리팩토링한다.

jest

공식 리액트 문서에서 권장하는 테스트 프레임워크 JSDOM을 통해 DOM에 접근할 수 있는 JS 테스트 러너

환경 구축하기

• cra로 초기화된 프로젝트에 jest 패키지가 기본으로 설치됨
• test하려는 js 파일과 test 함수가 있는 test.js 필요

test function

test('simple test', ()=>{
   expect();
});

• 인자로 test 명, 테스트 대상 함수, 타임아웃 지정

expect

• 테스트를 작성할 때 값이 특정 조건을 충족하는지 확인하는 용도
• expect 함수가 반환하는 matcher를 통해 결과를 검증함

matcher

1. toBe

• 기본 값을 비교하거나 개체 인스턴스의 참조 ID를 확인하는 데 사용.

2. toEqaul

• 참조 위치 고려 안함, 객체나 배열을 테스트할떄 사용.

react component test

React Testing Library는 매우 심플하지만 강력한 API를 가지고 있습니다. 크게 DOM에 컴포넌트를 랜더링 해주는 render() 함수와, 특정 이벤트를 발생시켜주는 fireEvent 객체, 그리고 DOM에서 특정 영역을 선택하기 위한 다양한 쿼리 함수들이 존재합니다.

render

• render() 함수는 @testing-library/react 모듈로 부터 바로 임포트가 가능하며, 인자로 랜더링할 React 컴포넌트를 받음.
• React Testing Library 제공하는 모든 쿼리 함수와 기타 유틸리티 함수 담고 있는 객체를 리턴

fireEvent

• fireEvent 객체는 쿼리 함수로 선택된 영역을 대상으로 특정 이벤트를 발생시키기 위한 이벤트 함수 return

참고

https://gmlwjd9405.github.io/2018/06/03/agile-tdd.html

https://medium.com/@taeksoon/%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A3%BC%EB%8F%84-%EA%B0%9C%EB%B0%9C-tdd-by-example-b3751ea90e71

https://goforit.tistory.com/135

https://runebook.dev/ko/docs/jest/expect

https://www.daleseo.com/react-testing-library/