Keea.Dev

Emscripten에서의 Test Suite

Posted on

TL;DR

요즘 Emscripten으로 WASM 작업하고 있는데 동작하나 확인을 하기 위해서는 c++ 코드 작성하고, 자바스크립트 작성 하고, 브라우저 켜서 콘솔창 확인하기 너무 번거로운 것이다. 이왕하는 것 c++ 코드로만 테스트를 진행하고 싶다. 그래서 이것저것 찾아봐서 Google Test를 적용시켜 보았다.

전제 조건

  • Emscripten SDK가 설치되어 있고 환경 변수가 구성되어 있어야 합니다.

함수 작성

테스트를 진행할 함수를 작성했다.

1
2
3
4
5
double add(double a, double b) { return a + b; }

EMSCRIPTEN_BINDINGS(my_module) {
  function("add", &add);
};

EMSCRIPTEN_BINDINGS을 사용하여, add 함수가 자바스크립트에서 사용할 수 있게 바인딩 했다. 해당 부분은 Embind를 확인하면 된다.

Test Suite 작성

1
2
3
4
5
6
7
8
9
10
#include <emscripten.h>
#include <emscripten/val.h>

using namespace emscripten;

TEST(WebTest, Add) {
  val Module = val::global("Module");
  double add_result = Module.call<double>("add", 1, 2);
  EXPECT_DOUBLE_EQ(1 + 2, add_result);
}

Add 함수를 테스트하여 덧셈이 올바른지 확인한다. emscripten::val을 사용하여 C++에서 JavaScript 객체를 호출하고 사용할 수 있다.
Embind로 바인딩한 add 함수를 호출해서 사용한다.

CMake 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
include(FetchContent)
FetchContent_Declare(
      googletest
      GIT_REPOSITORY https://github.com/google/googletest.git
      GIT_TAG v1.14.0
)

FetchContent_MakeAvailable(googletest)
include(GoogleTest)

set(LOPTS "${LOPTS} -lembind -O3 -std=c++11 -s ASYNCIFY")
set_property(TARGET ${TARGET} PROPERTY SUFFIX ".html")
link_libraries("-lembind")
target_link_options(${TARGET} PRIVATE "--emrun")
set_target_properties(${TARGET}
        PROPERTIES 
        LINK_FLAGS ${LOPTS}
)

target_link_libraries(${TARGET} PRIVATE gtest_main)

핵심적인 부분은 FetchContent를 통해 googletest를 설치하고, 사용할 수 있게 하고, emscripten를 위한 링크 플래그를 추가했다.

emrun은 Emscripten으로 생성된 HTML 페이지를 로컬에서 실행하고 디버깅할 수 있게 해주는 도구이다. link_libraries("-lembind")를 추가하여 emrun 활성화를 시킨다.
emrun에 대한 자세한 내용은 여기를 참고하면 된다.

실행

1
emrun --browser chrome --browser_args="--headless --disable-gpu --remote-debugging-port=9222" --kill_exit [HTML]

해당 명령어를 사용하면 된다. 옵션의 대한 간단한 설명은 다음과 같다.

  • --browser chrome : 구글 크롬을 사용하여 실행
  • --browser_args : 크롬 실행 시 추가적으로 전달할 옵션을 지정.
  • --kill_exit : HTML 실행 후 emrun이 종료될 때까지 대기하지 않고 즉시 종료.

실행을 하면 테스트함수가 진행되는 것을 볼 수 있다!

Finish

ぼくがかんがえたさいきょうのWasm(Emscripten/C++)テスト環境 해당 블로그에서 작업한 것을 봤길래 나도 냉큼 따라 해봤다. 생각보다 어렵지 않아서 좋은걸! 특히 자바스크립트와 html을 따로 작성안해서 좋다. 나는 웹 개발이 주가 아니라서 어렵단 말이지..

더 다양한 것을 하려면 복잡하겠지만, 간단한 작업은 이와 같이 하면 된다. 전체 내용은 gist 올렸으니 확인하면 된다. add 함수 외에 다양한 예시도 있다.

레퍼런스

더 자세한 정보를 원하시면 다음 문서를 참고하면 된다.