TDD 개발 환경 설정

인프런을 강의를 참고 하고 실습 했는데

나름 유료결제 인데 
강의가 오랜된것인지, 아니면 강사님의 성의 부족인지

detox 자체가 아예 안되는 것이다.

공식 홈페이지를 보니 방법도 많이 다르고
(보통은 주기적으로 강의를 업데이트를 하지 않나?)

그래서 최근에 내가 삽질하면서 성공한 사례를 정리 해보려고 한다.

그리고 npm 보다는 yarn 사용하려고 한다.
장점은 속도, 의존성 중복 해결 등등 자세한것은  구글링으로 찾아보도록 ~

 

1. jest설치

만약 npx react-native init "프로젝트 명" 명령으로 설치 했다면
기본적으로 설치 했기 때문에 jest를 따로 설치 해줄 필요 없다.

그러나 버전이 다르거나, package.json에 jest 가 설치 되어 있지 않다면

yarn add jest 명령으로 설치 해준다. 

 

root 디렉토리 내부에 __TEST__ 폴더에 App-test.js 파일안에

describe('Jest', () => {
	it('is it working?', ()=> {
    const a = 1;
    expext(a+1).toBe(2)
	})
})

위와 같이 간단하게 코드를 만들어주고

yarn test 명령어 날려주면

잘 작동하는 것을 확인 할수 있다. 

현재 내버전은 0.64인데 버전마다 default 테스트 디렉토리가 다르거나
별도의 디렉토리를 경로를 설정 해줘야 하는 경우가 있으니

react-native 버전에 맞춰서 설정 해주면 된다. 

 

2. enzyme 설치

AnB 에서 만들어 배포한 라이브러리 이다.
react 테스트 용이며, 컴포넌트를 테스트 하기 용이다. 

yarn add --dev enzyme enzyme-adapter-react-16 react-dom 명령으로 설치한다
(띄어쓰기 잘해주고)

setup.js 파일 안에 

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
 
Enzyme.configure({ adapter: new Adapter() });

위에 내용을 넣어주고

package.json 파일에 jest 섹션에

"setupFiles": [
      "setup.js"
    ]

위내용을 추가해준다.

자 이제 다시 한번 yarn test 명령어를 처주자

 

__TEST__ 디렉토리 안에서 setup.js 파일을 넣어놓고
package.json 파일에 경로 지정 해줬는데

인식하지 못해서 그냥 root 디렉토리로 setup.js 파일을 빼주고
package.json 에서 경로를 바꿔주니 제대로 인식이 됬다. 

 

3. detox 설치 

end to end 사용자 관점에서 테스트 하기 위한 라이브러리 이다. 
모바일 용이고, 원래는 ios만 지원 했는데 최근에 android도 지원하는 것 같다.

제일 삽질 많이 했던 구간이다.

그냥 처음부터 공식 문서보고 그대로 따라하면 되는것을...

xcode-select --install
brew tap wix/brew
brew install applesimutils
npm install -g detox-cli

순서대로 명령어를 처주고

yarn add --dev detox jest-circus

detox init -r jest

까지 명령어를 처주면 
프로젝트 폴더에 e2e 디렉토리와 .detoxrc.json 파일이 생성 된것을 볼수 있다

 

여기서 .detoxrc.json 파일 내용을 살짝 수정해준다.
yourAppName을 너의 프로젝트 명으로 변경해준다.

 {
   "testRunner": "jest",
   "runnerConfig": "e2e/config.json",
   "configurations": {
     "ios": {
       "type": "ios.simulator",
-      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY",
+      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/YourAppName.app",
+      "build": "xcodebuild -workspace ios/YourAppName.xcworkspace -scheme YourAppName -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
       "device": {
         "type": "iPhone 11"
       }
     },
     "android": {
       "type": "android.emulator",
       "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY",
       "device": {
         "avdName": "Pixel_2_API_29"
       }
     }
   }
 }

yarn start 명령 으로 앱을 먼저 기동 시켜주고

detox build -c ios
detox test -c ios

명령어를 처주면 잘 작동한다.

 

혹시나 해서 내 package.json 내용도 같이 올리겠다

{
  "name": "todotest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.1",
    "react-native": "0.64.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "detox": "^18.12.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "jest-circus": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-dom": "^17.0.2",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./setup.js"
    ]
  }
}

아그리고 프로젝트명이 앞글자가 대문자가 아니면

아예 xcode는 빌드 안된다.