[test] 자바스크립트 테스트 도구 간략 비교

---

작성일자 : 2019-09-30

믿을 만한 자바스크립트 테스트 도구 10가지
에서 언급한 10 가지 테스트 도구에 대해 간략한 메모

1. AVA

AVA github

1.1 특징

• Node.js test runner
• 간결한 테스트 syntax
• promise, Async function, Observable 지원 등..

1.2 샘플

import test from 'ava';

test('foo', t => {
    t.pass();
});

test('bar', async t => {
    const bar = Promise.resolve('bar');
    t.is(await bar, 'bar');
});

---

2. Cucumber.js (큐컴버)

큐컴버 github
큐컴버 가이드

2.1 특징

• Node.js와 현대 웹 브라우저에서 실행됌.
• 시나리오를 작성한다.
• 한글로 작성하는 것도 가능하다.

2.2 샘플

# features/simple_math.feature
Feature: Simple maths
  In order to do maths
  As a developer
  I want to increment variables

  Scenario: easy maths
    Given a variable set to 1
    When I increment the variable by 1
    Then the variable should contain 2

  Scenario Outline: much more complex stuff
    Given a variable set to <var>
    When I increment the variable by <increment>
    Then the variable should contain <result>

    Examples:
      | var | increment | result |
      | 100 |         5 |    105 |
      |  99 |      1234 |   1333 |
      |  12 |         5 |     17 |

// features/support/world.js
const { setWorldConstructor } = require("cucumber");

class CustomWorld {
  constructor() {
    this.variable = 0;
  }

  setTo(number) {
    this.variable = number;
  }

  incrementBy(number) {
    this.variable += number;
  }
}

setWorldConstructor(CustomWorld);

// features/support/steps.js
const { Given, When, Then } = require("cucumber");
const { expect } = require("chai");

Given("a variable set to {int}", function(number) {
  this.setTo(number);
});

When("I increment the variable by {int}", function(number) {
  this.incrementBy(number);
});

Then("the variable should contain {int}", function(number) {
  expect(this.variable).to.eql(number);
});

---

3. Enzyme (엔자임)

Enzyme page

3.1 특징

• 엔자임(Enzyme)은 리액트 자바스크립트(React JavaScript) UI 라이브러리용 테스트 유틸리티다.
• 리액트 구성요소의 출력을 손쉽게 테스트하기 위한 용도로 개발됐다.
• 개발자는 출력에 따라 런타임을 조작, 트래버스, 시뮬레이션할 수 있다.
• 애초에 mocha 와 함께 작동하도록 설계되었다.

함께 사용가능한 라이브러리
Browserify
Webpack
JSDOM
Jest
Karma
Mocha
React Native
Lab
Tape and AVA

3.2 샘플

Using enzyme with Mocha

// Shallow Rendering
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import MyComponent from './MyComponent';
import Foo from './Foo';

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow((
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    ));
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});

4. Karma (카르마)