[Epic React][Build an Epic React App][Unit Test][단위 테스트]

bookshelf/INSTRUCTIONS.md at exercises/11-unit-testing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

Background

---

코드를 변경할 때 앱이(다른 기능 포함)정상 동작하는지 확인하고 싶다.

복잡한 로직을 함수로 추출하고 테스트하면 큰 도움이 된다.

 

실습

---

단위 테스트를 수행할 두 개의 유틸리티가 있다.

첫 번째는 매우 간단한 formatDate 함수이고 다른 하나는 API 클라이언트 함수다.

formatDate함수는 순수 함수이고 별 로직이 없어서 매우 테스트하기 간단하다.

클라이언트 함수는 window.fetch로 실제 HTTP 요청을 하기 때문에 조금 더 복잡하다.

msw 라이브러리를 이용해 개발/테스트 서버를 동시에 mocking해 사용한다.

해당 라이브러리를 설정하면 특정 환경에서 fetch를 가로챈다.

 

server.use(
  rest.get(`https://bookshelf.jk/example`, async (req, res, ctx) => {
    return res(ctx.json({some: 'Sweet json!'}))
  }),
)

const response = await window.fetch(`https://bookshelf.jk/example`)
const result = response.json()
result.some === 'Sweet json!' // true

 

1. Test formatDate

간단한 순수 함수로 날짜를 포맷하는 함수를 테스트해보자.

위 UI의 날짜 포맷 함수를 테스트해보자

import {formatDate} from '../misc'

test('formatDate formats the date to look nice', () => {
  expect(formatDate(new Date('October 18, 1988'))).toBe('Oct 88')
})

이런 순수 함수의 기능은 UI 사용자 측면에서는 의미가 없는 경우도 많다.

유틸 함수의 테스트를 작성할 때에는, API 컨슈머 관점 / UI 사용자 관점 둘 중 하나의 입장에서 기능을 이용한다 생각하고 작성한다.

 

2. msw Server 세팅

엔드포인트에 GET 요청 및 결과 확인 테스트.

bookshelf/test-server.js at exercises/11-unit-testing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

import {setupServer} from 'msw/node'
import {handlers} from './server-handlers'

const server = setupServer(...handlers)

export * from 'msw'
export {server}

아래 페이지에 가면 msw 설정이 되어있다.

msw는 해당 api로의 fetch 요청을 프록시해서, 실제 서버로 요청을 보내지 않고 테스트 데이터로 바꿔준다.

따라서 서버가 없어도 개발이 가능하다.

이 성질을 이용해서 테스트 작성을 수월하게 해준다.

bookshelf/server-handlers.js at exercises/11-unit-testing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

3. 클라이언트 테스트 (서버와의 상호작용 테스트)

src/setupTests.js

bookshelf/setupTests.extra-2.js at exercises/11-unit-testing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

모든 테스트에 대해서  msw 서버 세팅을 적용한다.

모든 테스트 종료 시(afterEach) overriding된 핸들러를 초기화한다.

import {server} from 'test/server'

// enable API mocking in test runs using the same request handlers
// as for the client-side mocking.
beforeAll(() => server.listen())
afterAll(() => server.close())
afterEach(() => server.resetHandlers())

src/utils/__tests__/api-client.extra-2.js

bookshelf/api-client.extra-2.js at exercises/11-unit-testing · kentcdodds/bookshelf (github.com)

GitHub - kentcdodds/bookshelf: Build a ReactJS App workshop

api-client는 해당 서버로에 대한 요청 정보를 캡슐화한다(토큰, 에러 처리 등).

단순히 해당 엔드포인트에 대한 요청이나 응답이 예상한 데이터(입력데이터, mockResult)와 동일한지 확인한다.

api-client의 useCase 커버리지를 올리는 것에 집중하자.