Karma 테스트 러너로 ES6+ 의 코드를 유닛 테스트하기

Explanation

Karma 테스트 러너로 ES6+ 의 코드를 유닛테스트 하는 방법에 대해 적어보려 합니다. 이 글에서는 추가로 Webpack과 Babel을 사용하고 테스트 프레임워크로 Jasmine을 사용하여 간단한 테스트 코드를 작성하고 Karma가 정상적으로 동작하는지 확인합니다.

샘플코드 : Github – falsy

1. npm init

우선 init을 통해 기본적인 패키지 설정을 입력합니다.

2. 모듈 설치

2-1. Webpack

‘webpack’은 그 ‘Webpack’, ‘webpack-cli’ 커맨드 명령어를 편하게 해주는?(cli: Command Line Interface), ‘webpack-dev-server’는 로컬에 서버를 열어주는?, ‘html-webpack-plugin’은 Webpack으로 만들어진 번들 파일을 html 파일에 넣어주는(또는 가상의 index.html을 만들어주는) Webpack 플러그인?, ‘babel-loader’는 Babel을 Webpack에서 사용할 수 있도록 불러오는?? 모듈입니다.
(이건.. 설명을 한것도 아니고 안한것도 아니네요..)

2-2. Babel

‘babel-core’는 그 ‘babel’, ‘babel-preset-env’는… 이전에 ‘babel-preset-es2015’, ‘babel-preset-es2016’, ‘babel-preset-es2017’, ‘babel-preset-latest’ 같이 많이 사용되던 프리셋을 대체하는 프리셋 입니다. 대충.. ES6, ES7, ES8 -> ES5로 트랜스파일 해주는 프리셋??

2-3. Karma

‘karma’은 그 ‘karma’, ‘karma-chrome-launcher’는 크롬 브라우저로 테스트하기 위한??, ‘jasmine-core’는 그 BDD 테스트 프레임웍 Jasmin, ‘karma-jasmine’ 카르마와 재스민을 이어주고, ‘karma-webpack’을 카르마와 웹팩을 이어줍니다.

3. 디렉토리 구조

이 글은 위와 같은 디렉토리 구조로 만들것 입니다.

4. webpack.config.js 작성

5. karma.conf.js 작성

위 코드의 주석으로 표시한 부분을 제외하면 대부분 init 기본값입니다.
(직접 아래의 명령어로 init 후 위 코드의 주석된 부분을 추가하셔도 됩니다.)

6. package.json 수정

7. index.html 작성

8. index.js 작성

9. TestSpec.js 작성

10. 끝

부족한 설명과.. 많은 오타를 포함하고 있을 수 있습니다..
잘못되거나 부족한 부분은 댓글을 통해 알려주시면 감사하겠습니다 :)