[jest] jest란?

🎯 jest

• facebook에서 오픈소스화한 테스팅 프레임워크
• assertion 함수들, test runner, mock 라이브러리 등을 모두 제공한다.
• create-react-app에서 기본적으로 사용된다. (npm test)
• 사용성이 좋고, 가장 인기 있는 프로젝트다.

 

📝 jest의 핵심 기능들

• assertion matchers (.toBe, .toEqual)
• async assertion
• mock functions
• testing lifecycle functions
• grouping
• snapshot testing

 

📝 Assertion matchers

• jest는 풍부한 matcher를 제공하여, 여러 상황에서 match를 체크할 수 있다.
• expect()는 expectation object를 리턴한다. 이 object의 메서드를 이용해 여러 매칭 상황을 assert함.
• expect().toMatch()
  • .toBe()
  • .toBeDefined()
  • .toHaveCalledWith()

 

📝 Async Assertion

• 비동기 상황의 테스트를 처리할 수 있는 여러 방법을 제공한다.
• callback, promise, async/await을 모두 활용할 수 있다.

 

📝 Mock functions

• mock function을 만든다.
• 모듈 전체를 mocking 할 수 있다.
• 라이브러리 전체를 mocking 할 수 있다.

 

📝 Lifecycle functions

• 각 테스트의 시작과 끝, 전체 테스트의 시작과 끝에 원하는 작업을 할 수 있다.
• beforeEach, afterEach, beforeAll, afterAll 함수를 활용한다.
  • 무거운 데이터를 로드하고 테스팅을 해야 할 경우 beforeEach, beforeAll을 사용할 수 있다.
  • 전체 테스트를 한 후 메모리를 해제시켜야 하다면 afterEach를 사용할 수 있다.
• describe 블록 안에 사용하면 별도의 scope를 가진다.

 

📝 Grouping

• describe 함수를 이용해 여러 test() 함수를 논리적으로 나눌 수 있다.
• describe 함수 안에 describe 함수가 중첩될 수 있다.

 

📝 Snapshot Testing

• 특정 함수, 모듈, 컴포넌트 등의 결과를 serializable 한 형태의 snapshot으로 저장하고, 추후 변경이 발생했을 때 이전의 snapshot과 새로운 snapshot을 비교하여 변경이 발생했는지를 추측한다.
  • serializable 하다는 것은 리액트 컴포넌트가 랜더링 한 html을 예로 들 수 있다.
  • div 안에 렌더 된 결과가 있을 때 스냡샷으로 저장하고 컴포넌트 변경이 있을 때 스냅샷끼리 비교해서 변경을 알 수 있다.
• jest의 주요 기능으로, 코드의 변경이 컴포넌트의 렌더링 결과에 영향을 미치는지를 파악하기에 적합하다.
• TDD 같은 경우에는 먼저 기능을 테스트로 정의하고 구현하는데, 스냅샷 테스팅은 결과를 테스트하기 때문에 내부 로직을 테스트하는 것과 상관없기 때문에 TDD와는 적합하지 않다.

 

📝 jest 함수의 실행 순서

• beforeAll, beforeEach, afterEach, afterAll의 순서로 Lifecycle 함수들이 실행된다.
• 다만, describe 블록 안에 있는 before-*, after-* 함수는 해당 블록의 범위 안에서 실행된다.
• describe 함수는 모든 test() 함수 이전에 실행된다. 따라서 test() 함수들은 순차적으로 한꺼번에 실행된다.

 

📝 테스팅의 구성

import { render } from "@testing-library/react";

test('User component', () => {
    // setup
    const mockProps = {
        name: 'test-username',
        age: 20
    }

    // expectation
    const { container } = render(<User {...mockProps} />)

    // assertion 
    expect(container.firstChild).toMatchSnapshot()
})