Qunit을 사용하여 JavaScript 단위 테스트 시작하기

일반적으로 코드를 개발하는 동안 자동화된 단위 테스트를 수행하는 것이 좋습니다. 단위 테스트에서는 특정 동작에 대해 코드의 가장 작은 단위를 테스트합니다. 단위 테스트는 개발 주기 초기에 코드에서 버그를 찾는 데 도움이 됩니다.

Dhananjay Kumar Last Updated Feb 25, 2025 8min read

기본적으로 단위 테스트는 개발 단계에서 코드의 특정 단위의 동작을 확인하는 코드 조각입니다. 단위 테스트는 테스트 실행자에 의해 여러 번 실행되어 다른 입력 세트에 대한 특정 코드 단위의 동작을 확인할 수 있습니다. 요즘 대부분의 애플리케이션 개발자는 애자일 및 TDD 접근 방식을 고수합니다.

테스트 주도 방식 개발 방법에서는 먼저 단위 테스트를 작성하고, 단위 테스트가 실패하면 테스트를 통과하는 응용 프로그램 코드를 작성합니다. JavaScript에서 단위 테스트는 다른 프로그래밍 언어와 크게 다르지 않습니다. JavaScript에서 단위 테스트 또는 TDD를 수행하려면 테스트 프레임워크가 필요합니다. 다음을 포함하여 널리 사용되는 JavaScript 테스트 프레임워크가 많이 있습니다.

Mocha
Jasmine
QUnit
JSUnit

이번 포스팅에서는 jQuery 팀에서 제공하는 유닛 테스팅 프레임워크인 QUnit에 대해 중점적으로 설명하겠습니다. 풍부한 테스트 어설션 집합, 매우 유익한 테스트 도구 모음 UI, 동기 및 비동기 콜백 지원, 테스트 모듈 지원 등을 제공합니다. 이 게시물에서는 다음을 다룹니다.

첫 번째 단위 테스트 작성하기
테스트 도구 모음 UI 과소 평가
주장에 대한 살펴보기
테스트 그룹화

첫 번째 테스트 작성하기

자바스크립트 유닛 테스팅을 위한 QUnit 설정부터 시작해보자. HTML 페이지에서 두 개의 QUnit 파일에 대한 참조를 추가해야 합니다. 프로젝트에 로컬로 파일을 포함하거나 jQuery CDN의 참조를 사용할 수 있습니다. 아래와 같이 CDN 옵션을 사용하겠습니다.

Source file

<head>
    <title>Test Page</title>  
    <link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.16.0.css">  
    <script src="//code.jquery.com/qunit/qunit-1.16.0.js"></script>  
</head>

다음으로 HTML 페이지의 본문에 두 개의 div가 필요하고 하나는 id가 qunit 이어야 합니다.

Source file

1 <body>
2  <div id="qunit"></div>  
3  <div id="qunit-fixture"></div>  
4 </body>

테스트 환경을 설정하기 위해 qunit.js 및 qunit.css에 대한 참조를 추가했습니다. Qunit.js는 테스트 러너 및 테스트 프레임워크이며 qunit.css는 테스트 스위트 페이지에 스타일을 제공합니다.

이제 기본 테스트를 작성해 보겠습니다. 별도의 test.js 파일에 테스트를 작성하고 HTML 페이지에 파일 참조를 추가했습니다. 기본 hello 테스트는 다음과 같이 작성됩니다.

Source file

QUnit.test("hello test", function (assert) {
     assert.ok(1 == "1", "Passed!");
});

QUnit.test는 두 개의 입력 매개변수를 취합니다. 첫 번째 매개 변수는 테스트의 이름이고 두 번째 매개 변수는 함수입니다. 이 함수에는 테스트 코드가 포함되어 있으며 여러 어설션을 포함할 수 있습니다.

위의 테스트에서 간단한 ok 주장을 포함했습니다. ok 어설션은 인수가 true로 평가되면 true를 어설션합니다. 또한 string 입력 매개 변수를 사용하여 테스트 결과 메시지를 표시합니다. 계속해서 테스트를 실행하면 아래와 같은 출력을 얻을 수 있습니다.

테스트 스위트에서 QUnit은 하나의 테스트 중 하나가 통과했다는 메시지를 제공합니다. 이제 테스트를 실패로 변경하고 QUnit이 실패한 테스트에 대한 정보를 제공하는 방법을 살펴보겠습니다. 아래와 같이 테스트를 수정했습니다.

Source file

QUnit.test("hello test", function (assert) {
    assert.ok(1 == "2", "Passed!");
});

다시 한 번, 테스트를 실행할 때 QUnit은 아래와 같이 테스트 스위트에서 실패한 테스트에 대한 정보를 제공합니다.

실패한 테스트의 경우 QUnit은 다음 정보를 제공합니다.

예상 결과
Actual result
다름
실패한 테스트의 원인

이 정보를 사용하여 실패한 테스트의 원인과 이유를 쉽게 찾을 수 있습니다.

Understanding the Test Suite UI

테스트 스위트에서 QUnit은 테스트 결과를 표시합니다. 테스트 도구 모음의 머리글에는 테스트 페이지 제목이 표시되고 머리글 아래에는 녹색 또는 빨간색 막대가 있습니다. 녹색 막대는 모든 테스트가 통과했음을 나타내고 빨간색 막대는 하나 이상의 테스트가 실패했음을 나타냅니다. 표시줄 아래에는 세 개의 확인란이 있습니다.

Hide passed tests
전역 확인
try-catch 없음

첫 번째 상자를 선택하여 테스트 도구 모음에서 통과된 모든 테스트를 숨길 수 있습니다. 이 기능은 테스트가 많고 세트에서 실패한 테스트를 거의 찾지 않으려는 경우에 매우 유용합니다.

Check for globals 확인란을 선택하면 테스트 실행 전후에 모든 Windows 개체 속성 목록을 만들도록 QUnit에 지시합니다. QUnit은 차이점을 확인하고 차이점을 발견하면 테스트에 실패합니다.

No try-catch 확인란을 선택하면 테스트에서 예외가 발생할 때 기본 예외를 발생시키도록 QUnit에 지시 할 수 있습니다. 이 옵션에서 QUnit은 테스트의 예외로 인해 테스트 러너가 죽을 때 브라우저에서 기본 예외를 발생시키도록 하며, 이는 디버깅에 유용할 수 있습니다.

확인란 머리글 아래의 파란색 막대에 navigator.userAgent에 대한 정보가 표시됩니다. 파란색 막대 아래에는 모든 테스트를 실행하는 데 걸린 총 시간에 대한 정보를 제공하는 테스트 요약이 있습니다. 또한 실패한 어설션과 전달된 어설션의 수에 대한 정보를 제공합니다.

테스트 요약 아래에는 테스트 결과가 있으며, 이 테스트 결과는 숫자 옆에 테스트 이름과 함께 숫자 형식으로 표시됩니다. 중괄호 안의 테스트 이름 옆에 전달된 어설션의 수, 실패한 어설션의 수와 총 어설션의 수가 표시됩니다. 오른쪽 모서리에서 특정 테스트에 소요된 시간을 찾을 수 있습니다. 각 실패한 어설션 예상 결과에 대한 테스트 결과에는 실제 결과, 차이 및 실패한 테스트의 소스가 표시됩니다.

Assertions

QUnit은 다양한 종류의 주장을 제공합니다. 어설션은 단위 테스트의 가장 중요한 구성 요소입니다. 테스트에서는 예상 결과를 실제 결과로 주장하고 테스트 프레임워크는 이 두 결과를 비교하여 결과를 생성합니다. QUnit은 다음을 포함하여 약 13 개의 주장을 제공합니다.

ok()
equal()
deepEqual()
async()
기대하다()
notDeepEqual()
같지 않음()
notPropEqual()
notStrictEqual()을 참조하십시오.
propEqual()
push()
던지다()
strictEqual()

다음 섹션에서는 이 중 두 가지를 살펴보고 추가 기사의 주장에 중점을 둘 것입니다. 가장 간단한 주장은 ok() 입니다. 두 개의 인수가 필요합니다: 첫 번째는 평가할 표현식이고 선택적 두 번째 인수는 테스트 결과 메시지입니다.

첫 번째 인수가 true로 평가되어 표현식이 전달된 경우 어설션이 통과하거나 그렇지 않으면 실패합니다. ok 주장 중 일부는 다음과 같습니다.

Source file

QUnit.test("Test 1", function (assert) {
    assert.ok(1 == "1", "1 is ok with 1 : OK");
    assert.ok(true, "true is ok : OK");
    assert.ok(false, "false is not ok : fails");
    assert.ok(NaN, "NaN is not ok : fails");
    assert.ok(null, "null is not ok : fails");
    assert.ok(undefined, "undefined is not ok : fails");
});

테스트 스위트에서 NaN, undefined 및 null 등의 경우 ok 어설션이 실패하는 것을 볼 수 있습니다.

테스트 스위트에서 NaN, undefined 및 null 등의 경우 ok 주장이 실패하는 것을 볼 수 있습니다.

동등한 주장을 살펴 보겠습니다. 등호 어설션은 == 연산자를 사용하여 실제 인수와 예상 인수를 비교합니다. In은 두 개의 필수 인수와 하나의 선택적 인수를 사용합니다. 첫 번째 인수는 실제 값이고, 두 번째 인수는 예상 값이며, 선택적 세 번째 인수는 테스트 결과 메시지입니다.

첫 번째 인수는 실제 값이고, 두 번째 인수는 예상 값이며, 선택 사항인 세 번째 인수는 테스트 결과 메시지입니다

일부 등가 주장은 다음과 같습니다. 여기서 두 개의 인수를 전달하여 동일한지 여부를 테스트합니다.

Source file

QUnit.test("Test 1", function (assert) {
     assert.equal(1,1, "1 is equal to 1 : PASS");
     assert.equal(null,null, "null is equal to null : PASS");
     assert.equal(0,false, "0 is equal to false : PASS");
     assert.equal(0, "zero", "0 is not equal to zero : FAILS");
     assert.equal("", "","Empty is equal to Empty : PASS");
});

테스트 스위트에서 Equal Assertion의 동작을 볼 수 있습니다.

테스트 그룹화

테스트는 QUnit.module()을 사용하여 논리적으로 그룹화할 수 있습니다. 특정 테스트 그룹은 단독으로 실행할 수 있습니다. 부작용을 피하기 위해 테스트를 그룹화하는 것이 좋습니다. QUnit.module을 사용하여 테스트를 아래와 같이 그룹화 할 수 있습니다.

Source file

QUnit.module("Test Group 1");
QUnit.test("Test 1 TG1", function (assert) {
    assert.equal(1,1, "1 is equal to 1 : PASS");
});
QUnit.test("Test 2 TG1", function (assert) {
     assert.ok(true, "this test will return true : PASS");
});
 
QUnit.module("Test Group 2");
QUnit.test("Test 1 TG2", function (assert) {
     assert.equal(null,null, "null is equal to null : PASS");
});
QUnit.test("Test 2 TG2", function (assert) {
    assert.ok(false, "this test will return true : FAIL");
});

테스트 도구 모음 UI에서 테스트 결과를 테스트 그룹에 그룹화된 상태로 볼 수 있습니다.

빨간색/녹색 막대 아래의 드롭다운에서 테스트 그룹을 선택하여 특정 테스트 그룹의 테스트 결과를 보도록 필터링할 수도 있습니다.

결론

이 게시물에서는 QUnit을 사용한 JavaScript 단위 테스트로 시작했습니다. 첫 번째 단위 테스트를 작성하는 방법을 배우고, 테스트 도구 모음 UI에 대해 논의하고, 다양한 종류의 어설션을 탐색하고, 테스트 그룹화를 검토했습니다. 다른 유닛 테스트와 QUnit 주제에 대해 자세히 논의할 향후 기사를 계속 지켜봐 주십시오.

어떻게