UI Test를 위해 Detox를 적용해본다. -iOS

UI Test의 자동화를 추가 해보려고했다.

 

Appium을 먼저 시도를 했으나 이상하게도 시뮬레이터에서 어마어마게 지연현상이 일어나고 이러면 그냥 손으로하는게 더빠르겠다 싶어서 포기한적이 있었다. 

무엇이 문제였는지는 아직도 모르겠다.

 

그리고 이제 다시 Detox로 해보려고 한다.

 

사실 디톡스의 홈페이지에 방법이 적혀있다

디톡스를 적용해볼 사람은 굳이 이글을 읽지말고

https://wix.github.io/Detox/docs/introduction/getting-started/ 

Getting Started | Detox

를 보는게 좋다고 본다.

 

일단 필요한 도구들을 설치해준다.

npm install -g detox-cli

npm install detox --save-dev

디톡스들을 설치해주고

설정은 나중에 할거다.

 

그전에 문서에 이러한 항목이 있다.

Tip: Remember to add the node_modules folder to your git ignore file (e.g. .gitignore).

gitignore에 무시항목을 꼭 넣어주라는 말인데 

이걸 안해주면 모든 파일이 깃에 추가되어 특히 라이브러리들이 많은 리엑트 네이티브에서는 깃관리의 헬이 벌어진다.

프로젝트의 루트폴더에 .gitignore 라는 숨긴파일이 있을것이고 

해당 내용을 수정해주면된다.

폴더 자체를 관리 안할수도있고

파일 확장자별로도 관리 안할 수도 있고

여러가지가 있다.

 

 

디톡스를 설정하기전  나는 프로젝트가 제대로 시뮬레이터상에서 동작하는지 확인을 해야한다고 생각한다.

그래서 첫단계는

1. npm i 

로 라이브러리 먼저 설치한다.

여러가지 버전 문제로 실제로나는

 

npm i --force

 

의 명령어를 프로젝트 루트 폴더에서 실행시켰다.

 

그 다음은 ios 의 라이브러리를 설치한다.

cd ios && pod install --repo-update

 

왜 레포지토리의 업데이트도 같이 하는지는 내 프로젝트에서 사용중인 firebase 관련 라이브러리들이 이상하게 버전이 계속 어긋난다.

이럴때 --repo-update 옵션을 붙이니 잘맞게 설치가 되었다.

 

이제 iOS시뮬레이터로 돌아가는지 테스트를 해본다.

 

npx react-native run-ios --simulator="iPhone 12 mini"

 

시뮬레이터 옵션을 붙이는 이유는 맥북의 용량이 적기에 필요한 시뮬레이터만 남기고 죄다 삭제해버렸다.

그래서 기본으로 잡히는 시뮬레이터가 존재하지않는다는 에러를 뱉기에 따로 지정해줬다.

 

안드로이드는.... 결론만 말하자면 실패했다 이에 대해서는 후반부에 다시 적을 것이다.

iOS가 정상적으로 돌아가기에 이제 설정해줬다

 

detox init

를 실행한다.

 

디톡스에대한 설정을 package.json에 설정해줘도 된다고 적혀있지만

난 .detoxrc.json에 설정해줬다.

아래는 공식문서에 적힌 형식이다.

{
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 12 Pro Max"
      }
    }
  },
  "apps": {
    "ios.release": {
      "name": "YourProject",
      "type": "ios.app",
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/YourProject.app",
      "build": "xcodebuild -project ios/YourProject.xcodeproj -scheme YourProject -sdk iphonesimulator -derivedDataPath ios/build"
    }
  },
  "configurations": {
    "ios.sim.release": {
      "device": "simulator",
      "app": "ios.release"
    }
  }
}

뭔가 많다.

release라고 뒤에 붙은 애들과 따로 debug용으로 나눌수 있어서 이렇게 한것으로 보이나

난 디버그용이면 충분하다고 생각한다.

 

그래서 나는 아래와 같이 설정했다.

{
    "testRunner": "jest",
    "runnerConfig": "e2e/config.json",
    "skipLegacyWorkersInjection": true,
    "apps": {
      "ios": {
        "name":"<AppName>",
        "type": "ios.app",
        "build": "xcodebuild -workspace ios/<ProjectName>.xcworkspace -scheme <ProjectName> -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/<ProjectName>.app"
      }
    },
    "devices": {
      "simulator": {
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 12 mini"
        }
      },
      "emulator": {
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_API_28_AOSP"
        }
      }
    },
    "configurations": {
      "ios": {
        "device": "simulator",
        "app": "ios"
      },
      "android": {
        "device": "emulator",
        "app": "android"
      }
    }
  }

 

ios는 여타 다른 설정이 굳이 필요하지 않다

바로 e2e폴더에 테스트 코드를 넣고 돌리면 된다.

 

예제용 코드

describe("First UI test1", () => {

  it("should show Step One", async () => {
    await device.launchApp();
    await expect(element(by.text("Step One"))).toBeVisible();
  });

  it("should show Debug", async () => {
    await expect(element(by.text("Debug"))).toBeVisible();
  });

  it("should show \"Learn More", async () => {
    await expect(element(by.text("Learn More"))).toBeVisible();
  });
});

주의점은

if가 아니라 it이라는것과

여러 it이 있지만 하나라도 뭔가 이상하면 테스트가 없다고 에러가 날수 있다는점과

해당 코드들 기본으로 쓰이는 expect나 it , element 등등에 대한 import가 위에 적용될시 에러가 날 수 있다는점이다.

이런한 점때문에 시간을 참 많이 날렸다.

 

 

테스트를 돌릴려면 빌드가 필요하다.

detox build --configuration <your configuration name>

를 프로젝트 루트에서 실행해서 에러를 잡으면된다

 

나는

detox build --c ios

로 돌렸다.

configuration 을 c로도 동작한다는게 공식페이지에선 보이지 않는다.

 

테스트 코드를 실행하려면

detox test --configuration <your configuration name>

로 실행을 하면 기존 설치된앱이 삭제되고 새로 깔리며 실행된다.

 

나는

detox test -c ios 

로 돌렸다.

 

 

추가적인 팁을 적자면

 

각 파트별을 컴포넌트화 하여 임포트 시켜 사용할 수 있다.

난 긴 명령어를 간단하게 작성하려고 컴포넌트화를 시켜서 사용했다

다른 라이브러리를 임포트하여 ( axios )네트워크 통신도 넣어볼수있다.

- 어디선가 본 글에는 이러한 네트워크 통신을 테스트코드에 넣지말고 임의로 값을 반환해서 마치 값을 잘 받아온것처럼 하라고 하여서 서버 부담을 없애야한다고 했다. 만 나는 그냥 돌렸다.

 

 

 

iOS - 끝!

 

다음글은 결국 실패하고 기약을 알 수 없이 미뤄버린 안드로이드에대한 글이다.