React-testing-library 를 사용해서 TDD개발 흐름과 test로 null값 체크 해보기

   - Jest란 무엇인가?

        Jest는 대규모 웹 응용 프로그램에 대한 단순성과 지원에 중점을두고 Christoph Nakazawa가
       설계 및 구축 한 Facebook, Inc.에서 유지 관리하는 JavaScript 테스트 프레임 워크입니다.

     즉 Jest는 JS 테스트 프레임워크입니다.

     Babel, TS, Node,React,Angular,Vue 등을 사용하는 프로젝트에서 사용할 수 있다.

           

     즉, 프로젝트에서 코드 테스트를 하기 위해 사용하는 프레임워크이다.

     

    Create React App 에서의 Jest

     Create React App uses Jest as its test runner.
     출처 : https://create-react-app.dev/docs/running-tests/

       CRA 환경에서는 Test runner로 Jest를 사용하고 있다.

      Test 환경을 이미 Jest를 사용하고 있다는 뜻으로 Jest를 따로 설치할 필료가 없다.

         

      npx create-react-app Jest_null

   우선 만들 react-app 을 만들어준다.

 

CRA 환경에서는 Test runner로 Jest를 이미 사용하고 있다.

Test환경을 이미 Jest를 사용하고 있다는 뜻으로 Jest를 따로 설치할 필요가 없다.

 

 

 

CREACT_REACT_APP으로 프로젝트를 시작할 때 볼수있는 기본적인 환경이다.

이미 App.test.js 가 존재한다.

  package.json 에 dependencies 에도 @testing-library/jest-dom 이 존재한다.

             

     App.js 에 대한 test코드가 이미 존재하기 떄문에 yarn & npm test로 test를 해보면 위와 같이 Pass가 뜬다.

 

 파일 이름 규칙

  - Jest는 다음과 같은 일반적인 명명 규칙을 가진 테스트 파일을 찾는다.

 

  ●  __test__ 폴더에 .js 접미사가 있는 파일
  ●  .test.js 접미사가 있는 파일
  ●  .spec.js 접미사가 있는 파일

  .test.js / .spec.js 파일(또는 __test__폴더)는 src 폴더 아래의 모든 깊이에서 찾을 수가 있다.

  

  cra 공식 페이지 에서는 테스트 파일을 테스트 중인 코드 옆에 배치하는 것을 추천하는데 이는 같은 수준 (폴더) 에서 

  파일을 배치하며 가져올 때 코드를 짧게 쓸수 있기 때문이다.

  

  예를 들어, App.test.js와 App.js가 동일한 폴더에 있는 경우 테스트는 짧게 경로를 쓸수 있다.

  ("./App") === 이런식

  

  이를 통해서 대규모 프로젝트에서는 테스트를 보다 더 신속하게 찾을 수 있다.

 

   명령줄 인터페이스

    npm test & yarn test

    npm test & yarn test 를 하면 Jest가 Watch 모드로 실행된다.

   

   파일을 저장할때마다 test가 다시 실행되는데, 이는 npm start & yarn start 코드가 코드를 다시 컴파일 하는 방법과 같다.

   감시기 (watcher)에는 모든 테스트를 실행하거나 검색 패턴에 초점을 맞출 수 있는 명령줄 인터페이스가 포함되어 있다.

 

    npm test & yarn test 실행시

  Test 코드 작성하기

    test 코드를 작성하기 위해서는 it()(또는 test())블록을 사용한다. 

    그리고 블록안에 test 코드의 이름과 해당 코드를 작성하면된다.

   

     추가적으로,  describe() 블록을 사용하여 test 코드들을 그룹화 할 수 있다.

    (그러나 이것을 필수 가 아님) 

  

    it('테스트 코드의 이름', '테스트할 코드')
   또는 test('테스트 코드의 이름', '테스트 할 코드')

   테스트 코드 예시

 

• Sum.test.js에서 테스트를 진행함
• Sum 컴포넌트에서 함수 sum을 가져옴
• sum 함수는 두개의 인자를 받아 그것의 합을 return하는 함수
• it() 블록(또는 test()블록)을 이용해 테스트 코드 작성
• it() 블록에선 두개의 인자를 받는데 '테스트 코드 이름' 과 '테스트 코드' 이 두개를 받는다.
• 이 테스트 코드의 이름은 'sums numbers' 다 
• 다음으로 작성한 코드가 해당 테스트를 하는 코드다.
• jest의 expect와 toEqual 메서드를 사용한다.
• 코드를 읽으면, sum(1,2)의 값을 기대(expect)하면 3과 같다(toEqual)
• yarn test & npm test를 통해 코드를 테스트 하면 작성한 테스트 코드('sums numbers')가 초록색 박스인 PASS라고 뜨는 것을 알수 있다.

• it() 대신 test()를 사용해보았다.
• test 코드의 이름도 이번엔 한글로 작성해본다.
• 테스트에 통과하지 못했을때를 알아보기 위해서 sum(1,2)의 결과값과는 다른 값 (5)를 넣어보았다. 

• 아래와 같이 실패결과를 내보내준다.('sum 함수 테스트 용'. 통과하지 못함)
• Fail의 이유를 알려준다.(5를 기대했지만 3의 값을 받았기 떄문)

  Jest의 Expect와 Matchers

   expect

   테스트를 작성할 때, 값(value)가 특정한 조건을 충족하는지 확인해야할 때가 있다.

   이때 expect를 사용하면 다양한 'matchers'를 확인할 수 있다.

   

   즉,expect는 특정 조건에서의 값이 맞는지(matchers)를 확인하는데 사용한다.

   

  test('test 이름',() => {
  expect('검증대상'),matchers('기대값')
  }

  위 코드에서 2+2 의 값이 4와 같은지 (toBe) expect(확인,기대) 한다.

 

   자주 사용하는 matchers

   toBe()와 toEqual()

   test의 코드를 작성하면서 expect() 에 대한 메서드로 toBe()와 toEqual()을 사용하였다.

   둘의 차이는 다음과 같다.

  

'toBe' uses Object.is to test exact equality.
If you want to check the value of an object, use 'toEqual' instead:

    toBe()는 값이 정확하게 같은지 평가하며

     객체를 평가할 땐 toBe()가 아닌 toEqual()을 사용한다.

 

• 객체의 값에 대해 toBe()를 쓰면 오류가 발생한다.

  다양한 형태의 matchers

    Jest에선 bollean, undefined, null 도 matchers를 통해 test 할 수 있다.

 

• toBeNull matches only null
• toBeUndefined matches only undefined   
• toBeDefined is the opposite of toBeUndefined
• toBeTruthy matches anything that is if statement treats as true
• toBeFalsy matches anything that is if statement treats as false 

   matchers의 이름대로 그것이 null 값인지, undefined 값인지 확일할 수 도 있다.

•   expect 다음에 .not을 붙여 해당 값에 조건을 설정할 수 있다.

   그 중에  toBeTruthy와 toBeFalsy를 살펴보면,

   true 또는 false인지 확인한다라고 하기 보다 boolean 문맥에서 평가되는 값을 확인한다.

 

   즉, expect(true) ,expect(false) 도 가능하지만

   expect(true와 같은 값), expect(false와 같은 값)으로 확인한다는 뜻.

  

   이러한 이유로 숫자 0은 false와 같은 값이므로 toBeFalsy() 의 테스트를 통과한다.

• 숫자 0은 toBeFalsy()를 통과하지만 toBeTruthy() 통과에는 실패한다.

거짓같은값

 

 거짓 같은 값(Flasy와, falsy로 쓰이기도함) 값은 불리언 문맥에서 false로 평가되는 값
 false,0,-0,On,"",null,undefined,Nan
출처 : https://developer.mozilla.org/ko/docs/Glossary/Falsy

---

 값에 대한 특정 조건(숫자형 값의 0보다 큰가 ? 작은가? 등) 에 대한 테스트, 예외 발생 여부 등 다양한 matchers가 있으며 expect와  함께 활용할여 확인할 수 있다.

 

 더 자세한 내용은 Jest 공식 페이지의 using matchers에 서 확인할 수있다. 

Using Matchers · Jest

---

   참조

• [Jest] Jest 기초

[Jest] Jest 기초

---

 

GitHub - Koras02/React-Jest-null: React Jest를 사용한 null 값체크 - Jest기초 - https://velog.io/@mokyoungg/Jest-Jest%EB