개요

react, typescript 로 구성된 프로젝트의 unit test 라이브러리 및 환경설정방법

jest, @testing-library/jest-dom , @testing-library/react, jest-plugin-context, given2 를 사용함

목적

unit test 라이브러리에 대한 간략한 설명과 사용이유, jest 설정에 대해 공유하기 위함

jest

= javascript test framework

사용이유

모카, 자스민에 비해 큰 차이가 없고, facebook 에서 reat unit test 를 위해 사용하기 때문

사용한 설정

// jest.config.js 
module.exports = {
  setupFilesAfterEnv: ['jest-plugin-context/setup', '<rootDir>/jest-setup.ts', 'given2/setup'],
  verbose: true,
  testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@views/(.*)$': '<rootDir>/src/views/$1',
    '^@pages/(.*)$': '<rootDir>/src/views/pages/$1',
    '^@components/(.*)$': '<rootDir>/src/views/components/$1',
    '^@containers/(.*)$': '<rootDir>/src/views/components/containers/$1',
    '^@types_/(.*)$': '<rootDir>/src/types/$1',
    '^@new/(.*)$': '<rootDir>/src/platform/$1',
    '^@fp/(.*)$': '<rootDir>/src/lib/fp/index.ts/$1',
    '^@hooks/(.*)$': '<rootDir>/src/lib/hooks/$1',
    '^@modules/(.*)$': '<rootDir>/src/modules/$1',
    '^@const/(.*)$': '<rootDir>/src/lib/constants/index.ts/$1',
  },
}

https://jestjs.io/docs/configuration

1. setupFilesAfterEnv [array]

test 파일이 실행되기 전에 jest 에 추가적으로 구성하기 위해 실행되는 모듈의 경로 목록

ex > plugin 같은 파일을 추가할 경우 사용함

cf > setupFiles 의 경우 test framework 가 설치되기 전에 실행되기 때문에 사용하지 않음

jest-plugin-context, @testing-library/jest-dom, given2 를 jest 에 추가하기 위해 배열에 추가하였음

2. verbose [boolean]

각 test 에 대한 상세설명을 jest 실행 시 보여줄 지 여부를 결정하는 boolean 값

3. testMatch[array]

jest 가 test 파일을 감지하기 위해 사용하는 glob pattern

['*/?(.)+(test).[jt]s?(x)']

⇒ root 폴더 또는 하위 폴더에서 abc.test.js , ts, jsx, tsx 로 된 파일만 jest 에서 test 하도록 함

4. moduleNameMapper

webpack alias, tsconfig paths 처럼 별칭으로 된 module name 을 mapping 하기 위한 설정

현재 tsconfig, webpack 에서 설정한 내용과 동일하게 설정함

jest-plugin-context

DCI 패턴을 jest 에서 사용하기 위해 기존 describe 를 context 로 사용할 수 있게 해주는 plugin

https://johngrib.github.io/wiki/junit5-nested/#describe---context---it-패턴

@testing-library/jest-dom

https://github.com/testing-library/jest-dom

jest 에서 dom 을 test 하기 위한 library

@testing-library/react

https://testing-library.com/docs/react-testing-library/intro

React Component 를 test 목적으로 그려주는 역할을 한다.

given2

https://github.com/tatyshev/given2

개발자가 등록한 이름으로 memoized 된 get 접근자를 beforeEach, afterEach 에 등록해줌

특정상황에 따라 test 별로 beforeEach 에서 값을 설정하는 code 를 줄일 수 있어서 사용함

babel

https://jestjs.io/docs/getting-started#using-typescript

preset 에 @babel/preset-typescript, @babel/preset-env, @babel/preset-react 만 추가해 주면 된다.

{
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env"], 
  "@babel/preset-typescript"],
}

예시

• test 할 파일과 상관 없는 module 들을 mock 처리한다.
• 서버에서 받는 데이터들은 fake data 를 만들어 처리한다.
• @testing-library/react 를 통해 React Component 를 rendering 한다.
• jest matcher 로 확인한다.

import React from 'react'
import { render, screen } from '@testing-library/react'
import { t as tt } from 'i18next'

import { getTerms } from '@/model'
import Terms from '../Terms'

jest.mock('@/model')
jest.mock('@views/MyPageVerification')

const fakeResponse = {
  result: {
    ret: 'success',
    msg: '성공',
  },
  terms: '모인 이용약관 어쩌구 저쩌구',
}

describe('Terms', () => {
  beforeEach(() => {
    tt.mockClear()
    tt.mockImplementationOnce(() => '로딩중...')

    getTerms.mockResolvedValue(fakeResponse)
  })

  it('"로딩중..." 메세지가 나와야 합니다.', () => {
    render(<Terms />)

    expect(screen.getByText('로딩중...')).toBeInTheDocument()
  })

  it('서버에 이용약관을 요청해야 합니다.', () => {
    render(<Terms />)

    getTerms().then(res => {
      expect(res.terms).toBe(fakeResponse.terms)
    })
  })
})