[ReactJS] React 이론 공부 기초 - 8

React 테스팅

• 코드 테스트가 필요한 경우
  • 코드 작성 후, 원하는 대로 동작하는지 알려고 할 때
  • 코드에 버그가 있으면 어떤 상황에서 버그가 발생하는지 확인할 때
  • 코드를 리팩토링 한 후에, 원래대로 동작하는지 테스트할 때
• 리액트 앱의 컴포넌트가 늘어날 수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐
• 특정 코드가 수정되면, 어떤 컴포넌트에서 에러가 발생할 수 있음
• 테스팅 코드 작성의 이점
  • 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지
  • TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상함
  • 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 됨
  • 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높임
• mocking : 특정 동작을 흉내내는 것
• stubbing : 더미를 채워넣는 것
• 테스팅의 구성
  • setup
    • 테스트 하기 위한 환경을 만듦
    • mock data, mock function 등을 준비함
  • expectation 
    • 원하는 테스트 결과를 만들기 위한 코드를 작성함
  • assertion 
    • 원하는 결과가 나왔는지를 증명함
• 화이트 박스 테스팅 : 컴포넌트 내부 구조를 미리 안다고 가정하고 테스트 코드를 작성하는 것
• 블랙박스 테스팅 : 컴포넌트 내부 구조를 모른 채 어떻게 동작하는 지에 대한 테스트 코드를 작성하는 것
• 테스팅 범위에 따른 분류
  • Unit 테스팅
    • 다른 부분과 분리된 작은 코드를 만들어 테스트하는 것
    • 작은 코드 : function , module, class 등
    • 각 부분이 원하는 대로 동작함을 보장하기 위함
    • 테스트는 서로 분리되어야 함
  • Integration 테스팅
    • 앱의 특정 부분이 동작하는지 테스트함
    • ex) 여러 컴포넌트가 한꺼번에 동작하거나, 어떤 페이지의 부분이 잘 동작하는지를 테스트 하는 경우
  • end-to-end 테스팅
    • 유저가 어떤 시나리오를 가지고 그 시나리오의 end-to-end로 잘 동작하는지 테스트함
    • 필요한 경우 웹 서버, 데이터베이스를 실행함
    • 범위가 너무 넓어, 에러가 발생했을 때 특정 기능이 안된다는 것은 알 수 있지만 "정확히 어떤 부분"에 문제가 생겼는지 알기 힘듦
      •  ex) 유저가 회원가입 후, 로그인하여 유저 정보 페이지를 볼 수 있는지 테스트 하는 경우

jest

• facebook(현 meta)에서 오픈소스화 한 테스팅 프레임워크
• assertion 함수, test runner, mock 라이브러리 등을 제공함
• CRA에서 기본적으로 사용됨
• jest의 핵심 기능
  • assertion matchers
    • 풍부한 matcher를 제공하여 여러 상황에서 match를 체크함
    • expect()는 expectation object를 리턴하며, 이 object의 메서드를 이용해 여러 상황을 assert 함
  • async assertion
    • 비동기 상황의 테스트를 처리할 수 있는 여러 방법을 제공함
    • callback, promise, async/await를 모두 활용할 수 있음
    • callback 패턴의 경우, test() 함수가 제공하는 done() 함수를 활용하여 콜백이 끝나고 done()을 호출함
    • 에러가 발생하면 done()의 인자로 에러를 넘김
    • promise 패턴의 경우 async/await를 활용하거나, promise를 리턴함
  • mock functions
    • mock function을 만듦
    • 모듈 전체/라이브러리 전체를 mocking 함
    •  jest.fn()을 활용하여, mock function 객체를 만듦
    • mockReturnValueOnce() 등으로 리턴하는 값을 임의로 조작하며, 여러번 호출하면 순서대로 세팅된 값을 반환함
    • mockResolvedValue()로 promise가 resolve 하는 값을 조작함
    • jest.mock()으로 특정 모듈을 mocking 함
    •  
  • lifecycle functions
    • 각 테스트의 시작과 끝, 전체 테스트의 시작과 끝에 원하는 작업을 할 수 있음
    • beforeEach, afterEach, beforeAll, afterAll 함수를 활용함
    • describe 블록 안에 사용하면 별도의 scope를 가짐
  • grouping
    • describe 함수를 이용해 여러 test() 함수를 논리적으로 나눔
    • describe 함수 안에 describe 함수가 중첩 될 수 있음
  •  snapshot testing
    • 특정 함수, 모듈, 컴포넌트 등의 결과를 serializable 한 형태의 snapshot으로 저장하고, 추후 변경이 발생했을 때 이전의 snapshot과 새로운 snapshot을 비교하여 변경이 발생했는지를 추측함
    • jest의 주요 기능으로, 코드의 변경이 컴포넌트의 렌더링 결과에 영향을 미치는지를 파악하기에 적합함
    • toMatchSnapshot()을 호출하면, 기존에 스냅샷이 없었을 경우 ".snap" 파일을 만듦
    • 기존 스냡샷이 있을 경우, 새로운 스냅샷과 비교하여 변경사항이 있으면 테스트는 실패함
    • toMatchInlineSnapshot()을 호출하면 별도의 스냅샷 파일을 만들지 않음
      • 이 경우, 어떻게 스냅샷이 쓰였는지를 하나의 파일 안에서 알 수 있게 됨
• jest 함수의 실행 순서
  • beforeAll >  beforeEach > afterEach > afterAll 순서로 lifecycle함수들이 실행 됨
  • 다만, describe 블록 안에 있는 before-*, after-* 함수는 해당 블록 범위 안에서 실행 됨
  • describe 함수는 모든 test() 함수 이전에 실행되므로, test() 함수들은 순차적으로 한꺼번에 실행됨

react-testing-libray

 

• 테스트가 소프트웨어가 사용되는 모습을 닮을 수록, 테스트를 더욱 신뢰할 수 있게 됨
• 리액트 컴포넌트의 특정 메소드나 상태를 테스트 하는게 아니라, 실제 유저가 사용하는 방식대로 접근하여 테스트 함
• 유저가 어떤 DOM 요소에 접근하는 방법을 흉내냄
• 이 방식으로 테스트 코드를 작성하면 내부 구현이 바뀌어도 테스트가 깨지지 않음
• 리액트 컴포넌트가 렌더링한 결과에 대한 접근만 가능함
• 쿼리는 내부 상태나 내부 메서드에 접근할 수 없게 됨
• getBy
  • 원하는 요소를 찾지 못할 경우나 여러 개의 요소를 찾을 경우 에러를 던짐
• getByAll
  • 여러 요소를 찾아 배열을 반환하며, 원하는 요소를 찾지 못할 경우 에러를 던짐
  • 원소가 반드시 페이지에 존재해야만 하는 경우를 활용함
• findBy
  • 원하는 요소가 없더라도 비동기적으로 기다림
  • 여러 원소를 찾거나, 정해진 timeout 동안 찾지 못하면 에러를 던짐
• findAllBy
  • 여러 요소를 검색해 배열을 반환하며, 정해진 timeout 동안 찾지 못하면 에러를 던짐
• 쿼리의 우선 순위
  • 유저가 페이지를 이동하는 방식에 가까운 쿼리일 수록 우선 순위가 높음
  • 접근성 높은 HTML을 작성할 수록 테스트가 용이한 코드가 됨

 

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript