로메오의 블로그

[QUnit] 테스트 환경 설정 본문

Frontend/Test Driven

[QUnit] 테스트 환경 설정

romeoh 2019. 6. 27. 05:34
반응형

QUnit은 local server에서 구동할것이기 때문에 webpack으로 dev server 설정을 먼저 하세요.

WEBPACK DEV SERVER 구동하기

프로젝트 생성하기

프로젝트 root 폴더에 testRunner.html 파일을 생성합니다.

그리고 __test__ 폴더를 만들고 index.spec.js 파일을 생성합니다.

js 폴더에 index.js 파일도 생성합니다.

$ cd /my/project/path/firstProject
$ touch testRunner.html
$ mkdir __test__
$ touch __test__/index.spec.js
$ mkdir js
$ touch js/index.js

testRunner.html 파일을 열어서 코딩을 합니다.

<!doctype html>
<html>
<head>
    <title>Qunit</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qunit/2.9.2/qunit.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qunit/2.9.2/qunit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>

    <script src="js/index.js"></script>
    <script src="__test__/index.spec.js"></script>
</head>

<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

스크립트 파일은 cdn에서 스트리밍 하겠습니다.

다운로드해서 프로젝트 폴더에 넣으셔도 됩니다.

이런 모양새가 되었습니다.

 

Webpack dev server 구동

WEBPACK DEV SERVER 구동하기 포스트를 참조하세요.

$ npm run server

testRunner.html 파일을 클릭합니다.

 

QUnit runner가 실행되었습니다.

 

 

반응형

'Frontend > Test Driven' 카테고리의 다른 글

[Json-server] JSON-Server 이용해서 Mock API 만들기  (0) 2019.11.25
[Jasmine] 테스트 코드 작성  (0) 2019.06.29
[Jasmine] Karma 환경설정  (0) 2019.06.29
[QUnit] mock storage 사용하기  (0) 2019.06.28
[QUnit] 테스트 코드 작성하기  (0) 2019.06.28
'Frontend/Test Driven' Related Articles more
Comments