Jasmine은 자바스크립트 테스트 프레임워크입니다.
애플리케이션 규모가 갈수록 커지고 있는 상황에서 소프트웨어 공학 분야에서 테스트의 중요성을 날로 커지고 있습니다. 테스트를 직접 만들어 수행할 수도 있지만 프레임워크의 힘을 빌린다면 보다 간편하게 테스트를 작성하고 실시할 수 있게됩니다. 그래서 이번에는 자스민을 소개해드리려고 합니다.
(작성 시점 기준 jasmine 4.0.0을 사용했습니다.)
1. 자스민 설치
서론에서 자스민이 무엇인지 설명했으니 바로 설치를 시작하겠습니다. 링크에서 자스민 .zip파일을 다운받아주세요. 그 다음 압축풀기해서 나온 파일들을 프로젝트 작업공간으로 복사 붙여넣기 하면 됩니다. spec과 src 폴더 내부에 자스민에서 제공하는 예시 테스트 코드가 있는데 이 코드들은 삭제해도 무방합니다.
2. jasmine 사용하기
설치를 마쳤으니 이제 사용하는 방법에 대해 알아볼 시간입니다. 다음과 같은 자바스크립트 코드를 준비합니다.
const getSum = (x, y) => x + y;사실 너무 쉽고 뻔해서 테스트가 필요하지 않지만, 쉬운 예시를 위한 코드입니다. 이 코드를 테스트하려고 하는데 자스민에서 테스트 코드를 spec이라고 부릅니다. 자스민 폴더를 압축해제할 때 가져왔던 spec 폴더내부에 '파일명Spec.js'파일을 만들어서 테스트합니다.
아래는 Spec.js 테스트 코드입니다.
describe('getSum 함수 테스트', () => {
let x = 10;
let y = 3.14;
beforeEach();
afterEach();
it('getSum 함수 테스트 1', () => {
expect(getSum(x, y)).toEqual(13.14);
});
it('getSum 함수 테스트 2', () => {
expect(getSum(x, y)).not.toEqual(2);
});
});
describe('getSum 함수 테스트', () => {});먼저 테스트를 위한 코드를 describe() 메소드로 감싸줍니다.
describe(테스트 스위트명, specs);
테스트 스위트란, 관려된 테스트들을 모으는 것입니다. describe 메소드의 첫번째 인수에 스위트 이름을 넣고, 두 번째 인수로 주는 specs 함수 내부에 테스트 코드들을 작성하게 됩니다.
beforeEach();
afterEach();다음으로 보이는 것은 beforeEach()와 afterEach() 메소드입니다. beforeEach는 specs 내부의 개별 테스트 케이스가 실행되기 전에 항상 호출되는 초기화 처리입니다. 만약 초기화 처리가 필요하지 않다면 생략이 가능합니다. afterEach는 역시 개별 테스트 케이스 실행이 된 이후 처리하는 메소드입니다. 역시 필요하지 않다면 생략해도 무방합니다.
it('getSum 함수 테스트 1', () => {
expect(getSum(x, y)).toEqual(13.14);
});
it('getSum 함수 테스트 2', () => {
expect(getSum(x, y)).not.toEqual(2);
});그 다음으로 보이는 것은 it() 메소드입니다. it은 specs 내의 개별 테스트 코드들입니다.
다시 말해 하나의 테스트를 할 때 관련한 개별 케이스 it들이 모여 테스트 스위트를 이룬다라고 생각할 수 있습니다.
it 메소드는 다음과 같은 형태로 구성되어있습니다. 테스트 케이스 이름을 붙이고, 두 번째 인수로 주는 테스트 코드 함수 몸통에 테스트 내용을 적으면 됩니다.
it(테스트 케이스명, 테스트 코드);
테스트 코드 내부에서는 expect() 메소드로 해당 테스트에 대한 검증을 실시하게 됩니다. 예시 코드에서는 toEqual() 이라는 Matcher를 이용해서 값이 같은가? 라고 검증을 하고 있습니다.
expect(테스트 대상 코드).Matcher(기댓값);
expect() 메소드의 인수로 테스트할 대상의 코드(우리는 예시에서 함수를 테스트 할 것 이므로 함수를 넣습니다.) 메소드 체인으로 Matcher를 연결합니다. 이때 Matcher의 기댓값은 어떤 Matcher냐에 따라 필요할 수도 아닐 수도 있습니다.
Matcher라는 것은 expect 코드에 따른 결과를 확인하는 메소드들 입니다. 다음은 주로 사용되는 Matcher들 몇 가지를 소개하는 표입니다.
| Matcher | 설명 |
| toBe(expect) | expect와 동일한 '객체'이면 성공 아니면 실패 |
| toEqual(expect) | expect와 동일한 '값'이면 성공 아니면 실패 |
| toMatch(regex) | regex(정규식 표현)과 매치되면 성공 아니면 실패 |
| toContain(expect) | expect가 배열 내부에 포함되어 있으면 성공 아니면 실패 |
| toBeNull() | (코드 결과가)null이면 성공 아니면 실패 |
| toBeDefined() | undefined가 아니라면 성공 아니면 실패 (즉, 정의 되었는 가) |
| toTruthy() | true로 간주 가능한 값이면 성공 아니면 실패 |
| toFalsy() | false로 간주 가능한 값이면 성공 아니면 실패 |
| toThrow() | 예외를 발생시키면 성공 아니면 실패 |
| toBeLessThan(compareValue) | compareValue보다 작으면 성공 아니면 실패 |
| toBeGreaterThan(compareValue) | compareValue보다 크다면 성공 아니면 실패 |
| toBeCloseTo(compareValue, precision) | presicion으로 반올림 했을 때, compareValue와 같으면 성공 아니면 실패 |
또한, expect()와 Matcher 사이에 not을 삽입함으로써 부정 표현이 가능합니다. 기존 코드는 !연산자를 이용했었으나, 자스민에서 이러한 영어 표현을 이용해 더욱 직관적인 부정 표현이 가능하다는 것도 장점입니다.
이제 테스트를 위한 코드를 다시 작성하겠습니다. 필요없는 beforeEach()와 afterEach() 메소드를 제거해주세요.
describe('getSum 함수 테스트', () => {
let x = 10;
let y = 3.14;
it('getSum 함수 테스트 1', () => {
expect(getSum(x, y)).toEqual(13.14);
});
it('getSum 함수 테스트 2', () => {
expect(getSum(x, y)).not.toEqual(2);
});
});
자, 이제 spec 코드까지 작성을 완료했으니 테스트를 실시해볼 차례입니다. 테스트는 SpecRunner.html파일을 통해서 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v4.0.0</title>
<link rel="shortcut icon" type="image/png" href="../lib/jasmine-4.0.0/jasmine_favicon.png">
<link rel="stylesheet" href="../lib/jasmine-4.0.0/jasmine.css">
<script src="../lib/jasmine-4.0.0/jasmine.js"></script>
<script src="../lib/jasmine-4.0.0/jasmine-html.js"></script>
<script src="../lib/jasmine-4.0.0/boot0.js"></script>
<!-- optional: include a file here that configures the Jasmine env -->
<script src="../lib/jasmine-4.0.0/boot1.js"></script>
<!-- include source files here... -->
<!-- include spec files here... -->
</head>
<body></body>
</html>SpecRunner.html의 자스민 패키지 링크에 {#.#.#}이라고 써져 있을 텐데, 이것은 다운로드한 버전으로 바꾸면 됩니다.
코드에 주석으로 source파일과 spec파일을 적는곳이 써져있습니다. (안지켜도 무방) 해당 위치에 지금 만들어낸 js파일과 spec파일을 <script>태그에 넣어서 링크로 전달해주면 테스트 코드를 실행해볼 준비가 된 것 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v4.0.0</title>
<link rel="shortcut icon" type="image/png" href="../lib/jasmine-4.0.0/jasmine_favicon.png">
<link rel="stylesheet" href="../lib/jasmine-4.0.0/jasmine.css">
<script src="../lib/jasmine-4.0.0/jasmine.js"></script>
<script src="../lib/jasmine-4.0.0/jasmine-html.js"></script>
<script src="../lib/jasmine-4.0.0/boot0.js"></script>
<!-- optional: include a file here that configures the Jasmine env -->
<script src="../lib/jasmine-4.0.0/boot1.js"></script>
<!-- include source files here... -->
<script src='./src/getSum.js'></script>
<!-- include spec files here... -->
<script src='./spec/getSumSpec.js'></script>
</head>
<body>
</body>
</html>
SpecRunner.html을 실행했을 때 다음과 같이 성공했다는 화면이 나오나요?
만약 여기서 틀린 테스트 코드를 입력하면 어떻게 되는지도 확인해봅시다.
describe('getSum 함수 테스트', () => {
let x = 10;
let y = 3.14;
it('getSum 함수 테스트 (실패)', () => {
expect(getSum(x, y)).toEqual(1);
});
});
위 사진처럼 몇개의 테스트에서 몇 개의 코드가 실패했다고 뜨고, 어떤 테스트 케이스가 어떻게 실패했는지에 대해서 알려줍니다.
오늘은 이렇게 유용한 자바스크립트 테스트 프레임워크 Jasmine에 대해서 알아보았습니다.
참조
Jasmine Documentation
FAST Low overhead, jasmine-core has no external dependencies. BATTERIES INCLUDED Comes out of the box with everything you need to test your code. NODE AND BROWSER Run your browser tests and Node.js tests with the same framework.
jasmine.github.io
https://github.com/jasmine/jasmine#installation
GitHub - jasmine/jasmine: Simple JavaScript testing framework for browsers and node.js
Simple JavaScript testing framework for browsers and node.js - GitHub - jasmine/jasmine: Simple JavaScript testing framework for browsers and node.js
github.com
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] function 명령과 Function 명령/함수 리터럴 (0) | 2022.01.14 |
|---|---|
| [Javascript] Proxy 객체 (0) | 2022.01.14 |
| [Javascript] Iterator(반복자), Generator(발생자) (0) | 2022.01.11 |
| [Javascript] Symbol (0) | 2022.01.10 |
| [Javascript] numeric separators (0) | 2022.01.06 |
댓글