이제껏 TDD를 해봐야지.. 생각만 하다가 최근에 들어서 실무에 간단하게 TDD를 적용해본 경험을 공유해보고자 한다.

Jest 설치

여러가지 테스트 툴이 있긴 하지만, React 공식 문서에서 추천하는 Jest를 설치해보자.

npm install --save-dev jest

정말 간단하다.

만약 TypeScript 환경이라면 @jest/globals 혹은 @types/jest 패키지도 같이 깔아주자.

테스트 작성하기

사실 테스트 파일을 작성하는 위치를 찾느라 고생이 많았는데, 나는 rootDir (기본적으로 jest 설정 파일 혹은 package.json 파일이 위치한 디렉토리) 아래의 src/__test__ 에 테스트 파일을 작성했다. (밑의 파일은 공식 문서의 예시다.)

// <rootDir>/src/__test__/<domain>/<testfile>.test.ts

function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

스크립트 추가하기

package.json 에 다음과 같이 스크립트를 추가할 수 있다.

{
  "scripts": {
    // Jest 공식 문서에서 소개하는 스크립트.
    "test": "jest"
    // CRA 로 만든 앱은 다음과 같이 미리 설정되어 있다.
    "test": "react-scripts test",
  }
}

돌려보기

스크립트를 돌려보면 다음과 같은 결과 화면을 볼 수 있다. (밑의 결과는 실무에서 쓰고 있는 테스트의 결과다.)

yarn run test

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.995 s
Ran all test suites related to changed files.

엄청 간단하다.

후기

나는 현재 실무에서 업무 규칙을 담당하는 Entity를 별도로 만들어서 사용하고 있다. 그래서 이 녀석들을 단위 테스트하고 있다.

// src/shared/domain/dataProvider/DataProvider.ts

export default class DataProvider implements Entity.DataProvider.IDataProvider {
  constructor(public _: Entity.DataProvider.DataProviderField) {}

  static foo() { ... }

  get getFoo() { ... }

  set setFoo() { ... }

  doSomething() { ... }
}

// src/__tests__/entity/DataProvider.test.ts

const dataProviderFromBE: Common.DataProvider = { ... };

describe("DataProvider entity test", () => {
  const dataProvider = new DataProvider(
    DataProvider.transform(dataProviderFromBE)
  );

  it("DataProvider getter functions", () => {
    expect(dataProvider.getName).toEqual("홍길동");
    // ...
  });
});

사실 단순한 게터나 세터 함수 테스트는 큰 의미가 없는 것 같고.. 중간에 변환과정이 들어있거나, 아니면 (조립 가능한)작은 단위의 업무 규칙들을 테스트하는 것이 유의미한 것 같다.

이를 위해서라도 테스트가능한 코드를 작성하는 것이 좋을 것이다. (FP 만세)

앞으로 남은 것

테스트 자동화

Cypress, Puppeteer 같은 툴을 이용해 CircleCI, GitHub Actions, AWS CodeBuild 같은 CI 툴에 연동하여 자동으로 테스트가 동작하도록 해야 한다.

(잠깐 검색해보니 사이프레스가 CI 툴과의 연동이 공식 문서에 잘 설명되어 있는 듯. 퍼피티어는 아예 가이드에 CI 항목 자체가 없네..)

E2E 테스트

사실 UI가 필요없는 업무 규칙 단의 테스트는 유닛 테스트로 충분히 커버되지만, 사용자와의 상호작용까지 테스트해야 한다면 여간 귀찮은 게 아니다.

사실 아직 큰 필요성은 못느끼지만,, 한번 해보고 싶긴 하다.

TDD를 더 잘 하기 위한 노력들

유지보수 가능한 테스트를 장기적으로 적용하기 위해, 구현에 얽메이지 않는 테스트를 지원하는 툴도 있다. React Testing Library 라고, 리액트 공식 문서에서도 추천하는 툴이다. 얘가 뭘 하는 앤지 정확히 알아보진 않았지만, 요런것도 점진적으로 도입해보면 좋을 것 같다.