Front-End 테스트 환경 1) 간단하게 테스트 환경 구축하기
이 글에서는 간단하게 Front-End 테스트 환경을 구축하는 방법에 대해 공유하고자 한다. 참고) 본 글은 Karma 설정과 Jasmine의 API에 대해서는 깊게 다루지 않는다. 우선 Front-End 테스트를 실행할 수 있는 환경을 빠르게 구축함을 목적으로 작성되었다. 자세한 API와 설정에 대해서는 글 최하단의 참조의 각 Github Page에서 확인할 수 있다.
자바스크립트 테스트
자바스크립트에서 테스트를 수행할 때 필요한 것은 크게 3가지이다. 먼저 테스트 실행 환경, 테스트 코드를 수행할 테스팅 프레임워크, 마지막으로 그 테스트를 실행시킬 테스트 러너이다. 자바스크립트 테스팅 프레임워크, 테스트 러너의 종류는 많고 조합을 해서 쓰게 되면 경우의 수는 더 많아진다.
하지만 이 글과 후속되는 글에서는 FE개발랩에서 사용하는 테스트 환경에 맞춰 다중 테스트 환경을 구축하는 방법에 대해 소개할 예정이다.
각각의 사용법과 조합해서 사용하는 방법을 알아보기 전에, 우리 FE개발랩은 어떤 도구들을 사용하는지 먼저 알아보자.
실행 환경
자바스크립트 실행 환경은 여러종류가 있지만, 크게는 Node.js와 웹 브라우저가 있다.
FE개발랩은 웹 브라우저 환경에서 구동되는 서비스에 필요한 데이트피커, 페이지네이션 등의 컴포넌트와 차트, 그리드, 에디터 등의 작은 애플리케이션을 개발하므로 테스트 실행 환경은 웹 브라우저이다.
테스팅 프레임워크
자바스크립트 테스팅 프레임워크는 아래의 설문 결과 차트에 나와있듯 Mocha, Jasmine, Enzyme, Jest, Cucumber, Ava 등이 있다.
자바스크립트 테스팅 프레임워크 선호도 및 관심도 (링크)
위의 설문 결과를 보면 독보적으로 높은 인지도와 선호도를 가진 테스팅 프레임워크 Mocha와 Jasmine 두 개가 보인다.
우리 FE개발랩은 Jasmine을 사용한다. 두 프레임워크가 지원하는 기능은 비슷하며 Mocha가 조금 더 높은 사용성을 제공하지만(비동기 테스트의 경우) 현재 개발되는 제품들에 필요한 비동기 테스트가 적고, 기본적으로 지원하는 Assertion API와 빠른 테스트 수행 속도의 이점이 있는 Jasmine의 손을 들어주었다.
테스트 러너
테스트 러너로는 Karma를 사용한다. Karma는 Node.js에서 실행되며 matcher 등 테스팅 프레임워크의 기능은 제공되지 않는다.
Karma가 동작되는 방식을 요약하면 다음과 같다.
- karma 자체 서버를 띄운다.
- 사용자가 작성한 테스트 코드와 소스 코드를
karma.config.js에 미리 정의한 테스트 환경(웹 브라우저)의 IFrame 내부로 불러들여 테스트를 실행한다. - 테스트를 모두 수행하고 난 뒤 수행 결과를 karma 서버로 받고, 콘솔을 통해 개발자에게 결과를 보여준다.
기본적으로 karma-chrome-launcher, karma-safari-launcher 등을 사용해 로컬 개발 환경의 브라우저에서 손쉽게 테스트를 수행할 수 있다.
먼저 로컬 환경에서 테스트를 해보자
그럼 앞에서 언급한 테스팅 프레임워크, 테스트 러너로 로컬 환경에 테스트 환경을 구축하고 간단한 함수 및 테스트 코드를 작성해보자.
앞으로의 설명은 OS X를 기준으로 진행된다.
Node.js 및 필요한 모듈들 설치
먼저 Node.js를 설치한다.
설치가 완료되면 테스트 환경을 구축할 경로(필자는 'testing'이라는 폴더를 생성했다.)에 진입 후 package.json을 생성한다.
testing/package.json
{
"name": "test",
"repository": "http://github.com",
"scripts": {
"test": "karma start"
}
}다음으로 테스트 러너, 테스팅 프레임워크인 karma, jasmine과 크롬 브라우저를 실행하기 위해 karma-chrome-launcher를 설치한다.
$ npm install karma karma-chrome-launcher jasmine-core --save-dev
그리고 다음 명령어로 Node.js의 전역에 karma-cli도 설치해준다.
$ npm install -g karma-cli간단한 함수 및 테스트코드 작성
테스트를 수행하기 위해 간단한 함수를 가지고 있는 .js 파일을 만들어보자.
"use strict";
var sayHello = function() {
return "hello";
};자바스크립트 테스트를 수행하는 간단한 예제므로 편의상 함수 아래에 테스트 코드를 작성하겠다. 테스트 코드는 사용하는 테스팅 프레임워크인 Jasmine에 맞추어 작성했다. API 문서
testing/js/sayHello.js
"use strict";
var sayHello = function() {
return "hello";
};
// Test case
describe("sayHello.js", function() {
it('should returns string "hello"', function() {
expect(sayHello()).toBe("hello");
expect(sayHello()).not.toBe("bye");
});
});js/ 디렉터리에 테스트할 sayHello.js 파일을 생성하고 난 뒤라면 폴더 구조는 다음과 같을 것이다.
testing/
- js/
- sayHello.js
- package.jsonKarma 설정파일 생성
Karma로 테스트를 수행하려면 테스트할 소스 코드, 테스트 코드 등의 경로 및 테스팅 프레임워크 및 테스트 실행 환경을 정의하기 위해 karma.config.js를 만들어야 한다.
설정 파일을 손쉽게 만들기 위해 이전에 설치한 karma-cli의 도움을 받아보도록 하자.
testing/ 폴더에서 아래의 명령어를 실행한다.
$ karma init명령어를 실행하면 카르마 설정 파일을 간단하게 생성할 수 있도록 karma-cli가 몇 가지 물어볼 것이다.
현재 예제와 같은 구성에서는 대부분 'Return'키를 눌러서 진행하면 되지만 4번째 질문인 What is the location of your source and test files? 의 대답에만 올바른 경로를 적으면 된다.
만약 잘못 작성했다면 설정 파일(karma.config.js)을 열어서 files의 배열의 인자로 실제 경로를 추가하면 된다.
여기까지 진행했다면 sayHello() 함수를 테스트할 수 있는 설정 파일 생성이 끝났다.
폴더 구조를 다시 보면 아래와 같이 karma.config.js가 생성된 것을 볼 수 있다.
testing/
- js/
- sayHello.js
- package.json
- karma.config.js <- karma-cli로 생성테스트 실행
자 이제는 테스트를 실행해볼 일만 남았다.
이전에 package.json에 작성된 npm script "test" 로 테스트를 실행해보자.
$ npm run test아마 터미널에서 다음과 같은 콘솔이 한 줄씩 차례차례 나오면서 방금 전 설정해놓은 크롬 브라우저가 뜰 것이다.
테스트가 성공했다는 녹색의 텍스트가 반갑다. :)
하지만, karma가 테스트 완료 후에도 종료되지 않는 점이 의문일 것이다. 심지어 소스 파일을 수정 후 저장함과 동시에 테스트가 다시 수행되는 것을 발견할 수 있다. 이는 개발 도중에는 실시간으로 수정된 코드가 반영되고 지속적으로 테스트가 수행되어 이점일 수 있겠지만 CI와 같은 환경에서는 한 번만 수행되어야 할 것이다.
Karma의 설정 파일에서 파일들의 수정을 감지할 것인지, 지속적으로 테스트를 수행할 것인지 결정할 수 있다.
아래의 karma.config.js 파일을 한번 보자.
// Karma configuration
// Generated on ~~~
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: "",
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ["jasmine"],
// list of files / patterns to load in the browser
files: ["js/*.js"],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["progress"],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ["Chrome"],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};아마 현재 설정된 파일과 경로명이 다른 것 말고는 차이가 없을 것이다.
테스트 수행이 끝난 뒤 Karma와 브라우저가 종료되게 설정하려면, 파일 하단의 singleRun을 true로 변경하면 된다.
아까부터 계속 실행 중인 Karma 프로세스를 종료하고 다시 실행하면 테스트 수행이 완료된 후 Karma와 실행된 Chrome 프로세스는 자동 종료될 것이다.
마치며
로컬 환경에 자바스크립트 테스트 환경을 구축하여 테스트를 하는 과정은 여기까지이다. 위의 단계에서 조금 더 나아가면 다중 모듈을 번들링 하는 과정을 추가하고, 테스트를 수행하기 전에 ESLint 등의 정적 분석 도구가 실행되게 설정할 수도 있다.
다음에 다룰 원격지의 테스트 서버에 Karma 테스트 환경 구축하기 글에서 다양한 환경의 브라우저에서 테스트를 수행하는 방법과 FE개발랩에서 실제 사용하는 테스트 환경을 그대로 소개할 예정이다.
테스트를 생활화합시다!
참조
- Node.js - https://nodejs.org/
- Karma - https://karma-runner.github.io/
- Jasmine - https://jasmine.github.io/
- 테스트 환경 선호도 차트 - https://stateofjs.com/2016/testing/
- ESLint - https://eslint.org/