믿을 만한 자바스크립트 테스트 도구 10가지
에서 언급한 10 가지 테스트 도구에 대해 간략한 메모
1. AVA
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 (큐컴버)
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 (엔자임)
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);
});
});