React 테스팅 라이브러리
웹 모바일 E2E 테스트 프레임워크인 WebdriverIO 초기 셋업 간에 Test Runner로 mocha, jasmine, cucumber(bdd)만 선택 가능하도록 구성되어있다. 이번 포스팅은 왜 jest는 초기 셋업에서 할 수 없도록 구성했을까라는 의문에서 출발했다.
https://github.com/webdriverio/webdriverio/issues/2052
자세한 사항은 위 이슈에서 확인할 수 있다. 결론적으로 열띤(?) 토론 끝에 WebdriverIO에서 E2E 테스트를 위한 Jests 어설션 라이브러리를 제공하게 되었다. 하지만 WebdriverIO E2E 테스트는 내장 러너를 사용하도록 권장한다.
내친김에 Jest를 좀 더 살펴보기로 했다. 간단한 리액트 앱을 생성하고 Jest Watch 모드로 몇 가지 테스트를 해보았다. Jest 테스팅 라이브러리 사용법은 WebdriverIO와 굉장히 비슷했다. 로케이터 생성 방식과 내부 프로젝트에 셋업해야 하는 것 외에는 큰 차이점을 느끼지 못했다. E2E 테스트에서 로케이터에 해당하는 부분이 linkElement이다. getByText 메서드로 찾고자 하는 텍스트를 입력해준다. 그리고 expect로 화면에 해당 텍스트가 나타났는지 검증한다.
App.js에 Learn React가 존재하니 테스트 결과는 pass이다. 화면에 존재하지 않는 텍스트를 입력할 경우 실패하게 된다. 그런데 만약 test안의 내부 코드를 모두 지워버리면 어떻게 될까?
테스트 결과가 Pass로 나타났다. 내부에서 동작하는 로직이 없는데 왜 Pass인지 궁금해졌다.
https://jestjs.io/docs/api#testname-fn-timeout
test는 2개의 인수를 가진 global method이다. 첫 번째 인수는 테스트의 문자열이고 이를 통해 어떤 테스트에서 실패했는지 알려준다.
두 번째 인수는 테스트 함수이다. 성공과 실패를 결정하기 위해 해당 함수를 실행한다. 테스트 함수를 실행할 때 에러가 발생하면 실패를 발생시킨다.
expect 같은 경우는 기대하는 값과 실제 하는 값이 다를 경우 에러를 발생시킨다. 실패가 발생하는 조건이 에러가 발생해야만 실패가 발생하므로 test 메서드 안에 작성된 코드가 없을 경우 실패를 발생시키지 않는다. 즉 위에서 테스트 한 Empty test의 결과 값은 pass가 정상이었다.
좌측은 expect 구문에서 에러가 발생하여 실패된 모습이고 우측은 throw new Error로 에러를 직접 발생시켰다. 앞서 test 메서드의 실패 조건이 에러가 발생해야만 실패하는 것이므로 위 테스트 결과 또한 정상이다.
E2E 테스트 실무 진행 간에는 describe와 it 내부에 테스트 로직이 없는 경우가 없기 때문에 Empty test가 왜 pass인지에 대한 의문이 생기지 않았었다. 우연히 WebdriverIO와 문법적으로 비슷한 Jest를 살펴보게 되었는데 신기하기도 하고 한편으론 내가 다루고 있는 E2E 테스트 프레임워크와 사용 언어에 대해서 얼마나 깊게 이해하고 활용하고 있는지에 대해 돌이켜보게 되었다.