# Isomorphic 환경 구성하기 2
# 서두
지난 글에서는 기본적인 모듈 설정과 서버단에서 테스트와 커버리지 환경을 구성해보았다. 이번 글에서는 브라우저에서 구동되는 테스트와 커버리지를 구축해보겠다.
# Karma 설치
브라우저에서 간단하게 테스트하려면, html 파일을 만들고 <script> 태그로 로드하여 사용할 수 있다.
이 때는 html 파일이 바로 테스트 러너가 된다.
karma를 설치해보자. 5개나 되기 때문에 너무 길어서 두번으로 나누어 설치했다.
> npm i -D karma karma-webpack karma-mocha
> npm i -D karma-mocha-reporter karma-mocha-chrome-launcher
2
각 역할을 살펴보면...
- karma: 테스트 러너
- karma-webpack: karma에서 webpack을 실행한다.
- karma-mocha: karma에서 mocha를 실행한다.
- karma-mocha-reporter: 테스트시 mocha 스타일로 리포트 할 수 있게 해준다.
- karma-mocha-chrome-launcher: 자동으로 chrome을 띄워서 테스트를 수행한다.
karma 설정 파일을 생성하자. 몇가지 옵션을 선택해야 한다. 화살표키 위아래와 타이핑을 통해 아래처럼 설정해보자.
> npx karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*.test.js
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
Config file generated at "D:\workspace\isomorphic-test-environment\karma.conf.js".
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
karma.conf.js 파일이 생성된다. 파일을 열고, 몇가지를 수정해주자.
...
preprocessors: {
'test/**/*.test.js': ['webpack']
},
...
reporters: ['mocha'],
...
singleRun: true,
2
3
4
5
6
7
8
9
webpack을 거쳐서 번들링된 결과를 테스트할 수 있게 했다.
그렇지 않으면 문법 오류가 아마 날 것이다.
src 폴더는 포함시키지 않았는데, 그 이유는 webpack이 번들링중에 import하게 되기 때문이다.
webpack이 없다면 src를 포함해야 한다.
또한 출력을 mocha 스타일로 나오게 했다. 그렇지 않으면 테스트는 되지만 정보가 거의 나오지 않는다.
그리고 일단은 한번만 실행되도록 singleRun 항목을 수정해 주었다.
테스트를 수행해보자.
> npx karma start
크롬 창이 하나 잠깐 떴다가 사라지며, 콘솔 창에는 테스트 결과가 기존과 유사하게 출력될 것이다. 브라우저에서 테스트가 수행된 것이다!
# 커버리지 설정
이제 커버리지 설정을 해보자. 사실 서버단 테스트 결과와 브라우저 테스트 결과가 동일하다면 커버리지까지 브라우저에서 할 필요는 없다고 생각된다. 아마도 같은 결과일 것이다. 하지만 여기서는 실습이고, 브라우저만 설정하는 경우도 고려하기 때문에 브라우저 테스트 커버리지도 설정해 보겠다.
커버리지 관련 패키지를 설치하자
> npm i -D karma-coverage istanbul-instrumenter-loader
istanbul-instrumenter-loader 패키지의 역할은 babel로 코드변환을 하기 전에 커버리지 정보를 삽입하기 위해서이다. 이게 없으면 커버리지 리포트에서 보는 코드가 원본 코드가 아닌 트랜스파일링된 코드가 된다. 그러면 커버리지에 아무 의미가 없게 된다. 궁금하면 실제 이 설정을 빼고 해보면 된다.
이제 karma.conf.js를 수정한다.
webpack: {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules|\.test\.js/,
use: [
{loader: 'babel-loader'},
{loader: 'istanbul-instrumenter-loader', options: {esModules: true}}
]
}
]
}
},
reporters: ['mocha', 'coverage'],
coverageReporter: {
dir: 'coverage/browser',
reporters: [
{ type: 'html' },
{ type: 'text' },
// { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
]
},
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
reporters 항목은 coverage가 추가되었고, 나머지 항목은 신규 추가이다.
webpack은 기존 webpack.conf.js를 사용하지 않고, 별도 인라인 설정을 사용하도록 했다. 기존 설정을 서버와 브라우저에서 모두 공통으로 사용하도록 하는 연구는 아직 못해봤다.
이제 테스트를 수행해보면, 서버 테스트와 마찬가지로 콘솔에 테스트 결과와 커버리지 요약, 그리고 coverage 폴더에 커버리지 리포트가 출력될 것이다.
# Npm Script 등록
마지막으로 테스트 실행을 간단하게 할 수 있도록 npm script를 추가해주자.
"scripts": {
"test:node": "npx cross-env NODE_ENV=test npx -c \"mocha-webpack test/**/*.test.js --watch\"",
"test:browser": "./node_modules/.bin/cross-env NODE_ENV=test ./node_modules/.bin/karma start",
"coverage:node": "npx cross-env NODE_ENV=test npx nyc --reporter=text --reporter=html npx -c \"mocha-webpack test/**/*.test.js\"",
"coverage:browser": "./node_modules/.bin/cross-env NODE_ENV=test COVERAGE=y ./node_modules/.bin/karma start"
},
2
3
4
5
6
test 모드와 coverage 모드를 구분했다. test 모드는 무한 수행중이며 파일이 변경되면 다시 테스트를 자동으로 수행하는 방식이다. TDD에서 즐겨 쓰이는 방식.
coverage 모드는 커버리지 리포트를 출력하며 테스트는 1회성으로 수행한다.
# 결론
이로써 Isomorphic 모듈의 초기 코드를 완성했다. 노드와 브라우저 테스트를 모두 거친 모듈이라면 SSR(Server Side Rendering) 환경에서도 잘 동작할 수 있을 것이다.
참고로 위 내용중 크게 중요치 않은 부분은 빠진 내용도 있다. 코드는 깃헙에 있으니 참고하자.
Isomorphic Test Environment # js | Github (opens new window)
TIP
typescript 환경을 추가하게 됨으로써 javascript는 js 브랜치로 분리하였다.