[TDD] 03 - 테스트 개발 환경구축 2

Detox

개요

컴포넌트 테스트를 위한 목적이 아니라 End-to-End 테스트를 위해서 개발된 라이브러리이다. 모바일 개발환경을 위해서 개발되었다. 모바일 부분에서는 마땅히 대체할만한 라이브러리가 없어서 Detox로 진행한다.

설치

Detox 설치는 공식문서에서도 확인 가능하다. macOS 기준으로 작성되어있으며, Android 버전 가이드는 Android guide 를 참고한다.

Prerequisites

• High Sierra 10.13.6 이상의 macOS 버전

• Xcode 10.1 이상의 커맨드 라인 툴
  확인하기 위해선 터미널에서 gcc -v 를 타이핑 해본다.

• 테스트 가능한 React-native 앱

Step 1: 디펜던시 설치

1. 최신버전의 Homebrew 설치

2. Node.js 설치

3. applesimutils 설치

   brew tap wix/brew		// brew 에 wix/brew 패키지 저장소 추가
   brew install applesimutils	// 추가된 저장소에서 applesimutils 설치

   올바르게 설치되었는지 확인하기 위해 터미널에 applesimutils 타이핑해보기
   help 스크린이 출력되면 정상적으로 설치되었음

4. detox-cli 설치

Step 2: 프로젝트에 detox 추가하기

1. detox 설치
   yarn add detox --dev

2. package.json에 detox 설정 추가

   "detox": {
     "configurations": {
       "ios.sim.debug": {
         "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
         "build": "xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
         "type": "ios.simulator",
         "name": "iPhone 7"
       }
     }
   }

여기에서 중요한 것이 바로 "binaryPath" 키에 대한 값이다. 샘플로 명시된 값은 진행하는 프로젝트와 맞지 않기 때문에 재설정 해주어야 한다. 그렇지 않으면 테스트 타겟을 잡지 못해 테스트가 실패한다. 관련된 오류는 하단의 에러 탭 참조

3. Step 3: 첫 번째 테스트 생성하기

detox init -r jest

detox-cli에 있는 유용한 메서드 중 하나인데, test runner를 지정해서 자동으로 테스트 환경을 셋업해준다.

셋업 결과 <root> 디렉토리에 e2e 디렉토리가 생성된다. e2e/fireTest.spec.js 파일에 테스트를 작성할 수 있는데, 여기에 샘플로 작성된 코드 또한 테스트할 프로젝트와 맞지 않다. 테스트를 하기 위해선 다음과 같은 과정을 거치면 된다.

• 총 3개의 테스트 중 한개만 남긴다.

it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });

• src/App.js 에 컴포넌트 아무 거나 하나 골라서 testID="welcome" 으로 설정한다.

4. Step 4: 빌드, Detox 테스트 구동

   1. 빌드
      detox build

   2. 테스트 구동 (최종!)
      detox test