이번 장에서 Mocha(모카)와 Chai(차이)로 리액트 테스트를 실행하기 위해 설정하는 법을 알려드리겠습니다. 내보내진 함수 하나를 가지고 첫 번째 단언(assertion)을 구현하고 실행해보겠습니다. 먼저 특정 프레임워크(역주: 여기서는 애플리케이션 자체를 의미한다고 봅니다) 안에 있는 모든 테스트를 실행시키는 역할을 맡는 실행기가 필요합니다. 그 실행기가 Mocha 입니다.Mocha는 리액트 애플리케이션에 사용되는 유명한 테스트 실행기입니다. 이와 달리 또 다른 유명한 테스트 실행기인 Karma(카르마)는 앵귤러 애플리케이션을 테스트하는데 주로 사용됩니다.
커맨드 라인에서 Mocha를 개발 의존성 모듈로 설치하겠습니다.
npm install --save-dev mocha
그리고 단언을 작성하기 위해 사용되는 요소가 필요합니다. 누군가는 "X는 Y와 같아야 한다(Expect X to be equal to Y)" 라고 알려주어야 하거든요. 우리는 이번에 Chai를 사용해서 단언을 작성하겠습니다. Chai도 커맨드 라인으로 설치해줍니다.
npm install --save-dev chai
리액트 컴포넌트를 테스트 할 때 가상의 브라우저 환경을 만들어주어야 할 필요가 있습니다. 왜냐면 컴포넌트들은 실제로 HTML로 그려지면서 브라우저의 DOM이 될 테니까요. 하지만 테스트 코드는 실제 브라우저에서 실행되지 않기 때문에 컴포넌트를 직접 테스트하기 위한 최소한의 환경을 갖추어야 합니다. 그래서 jsdom도 의존성 모듈로 설치해야 합니다. jsdom은 뒷장에서 만들어 볼 테스트에서 가상의 브라우저 환경을 만들어줍니다.
npm install --save-dev jsdom
이렇게 테스트 환경을 구축하기 위한 최소한의 라이브러리들을 설치했습니다. 몇 가지 테스트들을 작성하고 실행해 본 뒤에 나중에는 더 발전된 라이브러리를 사용하여 리액트 컴포넌트 테스트 환경을 보강해볼 예정입니다.
이번 장 마지막 과정으로, 테스트를 실제로 실행하기 위해 라이브러리를 설정하는 법을 살펴보겠습니다. src 폴더와 같은 레벨에 test 폴더와 그 안에 필요한 설정 파일들을 만들겠습니다.
mkdir test
cd test
touch helpers.js dom.js
위의 파일은 커맨드 라인에서 테스트 스크립트를 실행할 때 환경 설정하는데 사용됩니다. 먼저 test/helpers.js 파일부터 보겠습니다.
import { expect } from 'chai';
global.expect = expect;기껏 한거라곤 expect 함수를 Chai에서 가져와서 할당해둔겁니다. 이 함수는 나중에 테스트 할 때 "X는 Y와 같아야 한다" 는 단언을 작성할 때 사용합니다. 더 나아가 expect 함수는 이 파일을 사용하는 모든 테스트 파일의 전역 함수로 할당됩니다. 그러면 매번 expect 함수를 직접 가져오지 않고도 바로 사용할 수 있게 됩니다. 조금 뒤에는 더 많은 함수를 테스트용 전역 함수로 추가하게 됩니다. 어쨌든 거의 모든 테스트에 사용하는 함수들이니까요.
test/dom.js 파일에는 가짜 브라우저 환경을 설정해서 리액트 컴포넌트가 HTML로 그려지도록 설정합니다.
import { JSDOM } from 'jsdom';
const { window } = new JSDOM('<!doctype html><html><body></body></html>');
function copyProps(src, target) {
const props = Object.getOwnPropertyNames(src)
.filter(prop => typeof target[prop] === 'undefined')
.reduce((result, prop) => ({
...result,
[prop]: Object.getOwnPropertyDescriptor(src, prop),
}), {});
Object.defineProperties(target, props);
}
global.window = window;
global.document = window.document;
global.navigator = {
userAgent: 'node.js',
};
copyProps(window, global);이 강좌에서는 위의 코드 자체를 깊이 설명하진 않겠습니다. 기본적으로 리액트 컴포넌트 테스트를 위해 브라우저의 동작을 흉내낸다고 생각하시면 됩니다. jsdom 라이브러리가 브라우저에 사용되는 window 객체를 만들고 document 객체같은 객체를 추가합니다. 코드 내용이 이해하기 힘들다고 너무 걱정하지 마세요. 뒤에 이 파일을 건드릴 일은 거의 없습니다.
이렇게 필요한 헬퍼 파일이 모두 준비되었습니다. 하나는 테스트 파일 전체에 사용되는 함수를 전역 함수로 만드는 파일이고(어쨌든 필요하게 됩니다), 나머지 하나는 리액트 컴포넌트를 테스트 할 때 DOM을 흉내내는 설정 파일입니다. 이제 테스트를 위한 스크립트를 package.json 에 작성해야 합니다. 특정 접미사(spec, test 등)가 있는 파일을 모두 실행하는데, 실행하면서 위에 만들어둔 파일을 설정 파일로 사용하는 스크립트를 만듭니다.
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js",
"test:unit": "mocha --require babel-core/register --require ./test/helpers.js --require ./test/dom.js 'src/**/*.spec.js'"
},보시다시피 스크립트는 설정 파일을 require 문으로 가져오고 *.spec.js 라는 형태로 되어있는 파일을 모두 실행합니다. 기본적으로 테스트 파일 이름은 App.spec.js 처럼 되어 있고 src 폴더 아래라면 어디든지 상관없습니다. 물론 파일 이름이나 폴더 위치 등의 규칙은 여러분이 정하기 나름입니다.
테스트 스크립트는 npm run test:unit 으로 실행할 수 있겠지만 지금은 아무런 파일이 없기 때문에 테스트 파일을 찾을 수 없다고 뜰 겁니다. 다음 장에서 실제로 파일을 만들게 되겠지만, 일단 스크립트를 조금 더 추가하겠습니다. 바로 전에 작성한 스크립트를 실행하지만, 관찰(watch) 모드로 실행하는 스크립트입니다.
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js",
"test:unit": "mocha --require babel-core/register --require ./test/helpers.js --require ./test/dom.js 'src/**/*.spec.js'",
"test:unit:watch": "npm run test:unit -- --watch"
},관찰 모드에서는 테스트가 한번 실행되고 난 뒤 유지되다가 소스 코드나 테스트에 변경이 일어나면 바로 다시 실행됩니다. 테스트 주도 개발을 할 때 관찰 모드를 설정해 놓으면 테스트를 추가하거나 변경할 때 즉시 피드백을 얻게 됩니다.
추가 설명: npm run test:unit:watch 로 관찰 모드를 실행하면서 개발 서버를 작동하려면 터미널 탭을 양 쪽에 두 개 띄워야 합니다.
Mocha와 Chai로 테스트하기에 앞서 작지만 쓸모 있는 라이브러리를 하나 더 소개해드리겠습니다. ignore-styles 라는 녀석인데, 나중에 개발하시면서 리액트 컴포넌트에 CSS 스타일을 적용하시게 되겠지만 실제로 테스트에는 필요 없는 부분이므로 무시하고 싶을 때 사용합니다. 라이브러리를 npm install --save-dev ignore-styles 로 추가하신 다음에 스크립트의 내용을 조금 수정해줍니다.
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js",
"test:unit": "mocha --require babel-core/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles 'src/**/*.spec.js'",
"test:unit:watch": "npm run test:unit -- --watch"
},드디어 Mocha와 Chai로 리액트 애플리케이션을 테스트하기 위한 설정을 마쳤습니다. 다음장에서는 첫 번째 테스트를 작성해 보겠습니다.