테스트

설정

Mithril.js 애플리케이션 테스트는 비교적 간단합니다. 시작하기 가장 쉬운 방법은 ospec, mithril-query 및 JSDOM을 사용하는 것입니다. 이 라이브러리들은 다음 명령으로 간단하게 설치할 수 있습니다.

bash

npm install --save-dev ospec mithril-query jsdom

설정 과정도 비교적 간단하며 몇 단계를 거쳐야 합니다.

package.json 파일의 npm 스크립트에 "test": "ospec"을 추가합니다. 결과는 다음과 유사할 것입니다. 프로젝트에 따라 추가 필드가 있을 수 있습니다.

json

{
  "name": "my-project",
  "scripts": {
    "test": "ospec --require ./test-setup.js"
  }
}

다음과 같은 설정 파일 test-setup.js를 생성합니다.

javascript

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // `requestAnimationFrame`을 사용할 수 있도록 설정
  pretendToBeVisual: true,
});

// Mithril.js 작동에 필요한 전역 변수를 설정합니다. 처음 두 변수는
// 테스트에서 유용하게 사용될 수 있습니다.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Mithril.js를 require하여 제대로 로드되는지 확인합니다.
require('mithril');

// 테스트가 완료되면 JSDOM을 종료합니다.
o.after(function () {
  dom.window.close();
});

다음과 같은 컴포넌트 src/my-component.js를 생성합니다.

javascript

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', vnode.attrs.text);
    },
  };
}

module.exports = MyComponent;

마지막으로 다음과 같은 테스트 파일 src/tests/my-component.js를 생성합니다.

javascript

var mq = require('mithril-query');
var o = require('ospec');

var MyComponent = require('../my-component.js');

o.spec('MyComponent', function () {
  o('정상적으로 작동하는지 확인', function () {
    var out = mq(MyComponent, { text: 'What a wonderful day to be alive!' });
    out.should.contain('day');
  });
});

모든 설정을 완료했으면, 라이브러리를 설치한 터미널에서 다음 명령을 실행합니다.

bash

npm test

정상적으로 설정되었다면 다음과 같은 출력이 나타납니다.

––––––
All 1 assertions passed in 0ms

모범 사례

테스트는 대부분의 경우 비교적 간단합니다. 각 테스트는 일반적으로 상태 설정, 코드 실행, 결과 확인의 세 부분으로 구성됩니다. 하지만 최상의 결과를 얻고 시간을 절약하기 위해 테스트 시 다음 사항을 고려해야 합니다.

가능하면 개발 초기 단계에서 테스트를 작성하는 것이 좋습니다. 테스트를 즉시 작성할 필요는 없지만, 코드를 작성하는 동안 함께 작성하는 것이 좋습니다. 이렇게 하면 예상대로 작동하지 않는 경우, 문제 발생 즉시 원인을 파악하여 빠르게 해결할 수 있습니다. 6개월 후 망가진 앱 아이디어를 수정하느라 며칠을 소비하는 상황을 방지할 수 있습니다.
API와 동작을 테스트하되, 구현 세부 사항은 테스트하지 마십시오. 특정 작업이 발생했을 때 이벤트가 발생하는지 테스트하는 것은 괜찮습니다. 하지만 테스트에서 전체 DOM 구조를 검증하는 것은 피해야 합니다. 스타일 관련 클래스를 추가했다는 이유만으로 여러 테스트를 수정해야 하는 상황은 피해야 합니다. 또한 객체에 새 메서드를 추가했다고 해서 모든 테스트를 다시 작성하고 싶지는 않을 것입니다.
코드 반복을 두려워하지 말고, 동일한 파일에서 수십 번에서 수백 번 동일한 작업을 수행하더라도 명시적으로 테스트를 생성하는 경우에만 추상화하십시오. 일반적으로 코드에서는 동일한 논리를 2-3번 이상 반복할 경우 함수로 추상화하는 것이 좋지만, 테스트할 때는 중복된 논리가 많더라도 중복성은 테스트 문제 해결 시 맥락을 이해하는 데 도움이 됩니다. 기억하십시오: 테스트는 일반 코드가 아닌 요구사항 명세입니다.

단위 테스팅

단위 테스팅은 애플리케이션의 일부, 일반적으로 단일 모듈이지만 때로는 단일 함수까지 격리하여 단일 "단위"로 테스트합니다. 특정 입력 및 초기 상태가 주어졌을 때 원하는 출력 및 부작용을 생성하는지 확인합니다. 복잡하게 들릴 수 있지만 실제로는 그렇지 않습니다. 다음은 JavaScript의 + 연산자를 숫자에 적용한 몇 가지 단위 테스트입니다.

javascript

o.spec('addition', function () {
  o('정수 덧셈', function () {
    o(1 + 2).equals(3);
  });

  o('실수 덧셈', function () {
    // IEEE-754 부동 소수점의 특성 때문입니다.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

이처럼 간단한 것들을 단위 테스트할 수 있는 것처럼, Mithril.js 컴포넌트도 단위 테스트할 수 있습니다. 다음과 같은 컴포넌트가 있다고 가정해 보겠습니다.

javascript

// MyComponent.js
var m = require('mithril');

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', [
        vnode.attrs.type === 'goodbye' ? 'Goodbye, world!' : 'Hello, world!',
      ]);
    },
  };
}

module.exports = MyComponent;

다음과 같이 몇 가지 단위 테스트를 쉽게 작성할 수 있습니다.

javascript

var mq = require('mithril-query');
var MyComponent = require('./MyComponent');

o.spec('MyComponent', function () {
  o("`type`이 `hello`일 때 'Hello, world!'를 표시", function () {
    var out = mq(MyComponent, { type: 'hello' });
    out.should.contain('Hello, world!');
  });

  o("`type`이 `goodbye`일 때 'Goodbye, world!'를 표시", function () {
    var out = mq(MyComponent, { type: 'goodbye' });
    out.should.contain('Goodbye, world!');
  });

  o("`type`이 주어지지 않았을 때 'Hello, world!'를 표시", function () {
    var out = mq(MyComponent);
    out.should.contain('Hello, world!');
  });
});

앞서 언급했듯이 테스트는 사양입니다. 테스트를 통해 컴포넌트가 어떻게 작동해야 하는지 확인할 수 있으며, 컴포넌트는 매우 효과적으로 작동합니다.

테스트 ​

설정 ​

모범 사례 ​

단위 테스팅 ​

테스트

설정

모범 사례

단위 테스팅