概要
Chrome Extention やWebページ用のJSのコード書くときに使う単体テスト環境をサクッと用意したいと思って色々試しました。
今のところこれが個人的なベストです。
「もっと良いやり方があるよ！」という方、是非教えてください。真似させていただきます。
ちなみにqunitの概要についてはこちらのQiita記事が詳しいです。
完成図
/ (プロジェクトフォルダ)
├── Gruntfile.js
├── node_modules/
├── package.json
├── src (ソースコードを入れる)
│ └── aaa.js
└── test (テストコードを入れる)
├── aaa.test.js
└── index.html
テスト環境の構築
サクッとやります。
前提
- Mac
- node, npmはインストール済み
事前準備
grunt-cli が入っていない人は以下のコマンドでインストールしておきましょう。
$ npm install grunt-cli -g
手順
$ mkdir (プロジェクトフォルダ名)
$ cd (プロジェクトフォルダ名)
$ mkdir src
$ mkdir test
$ npm init
# ウィザードが始まるので適当に答える
$ npm install grunt qunitjs grunt-contrib-qunit grunt-contrib-watch --save-dev
$ vim Gruntfile.js
# Gruntfileのひな形は後述
$ vim test/index.html
# test/index.html についての注意事項は後述
Gruntfile.js はこんな感じにしておきます。
default のタスクはご自由にお使いください。プロダクションコードを生成するタスクを登録しておくのが良いのではないでしょうか。
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
qunit: {
all: ["test/*.html"]
},
watch: {
files: [
"Gruntfile.js",
"src/*.js",
"test/*.js",
"test/*.html"
],
tasks: ["qunit"]
}
});
grunt.registerTask("test", ["qunit"]);
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
};
test/index.html は以下のようにしておきます。
ファイルパスにだけ注意しておきましょう。npmでインストールした qunitjs のファイルを見に行っています。
qunitをnpmでインストールしたのは私の好みなので、余計なパッケージを入れたくない方はqunitのサイトから落として来て入れれば良いと思います。
test/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit</title>
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- 開発したソースコードをこの辺りに -->
<script src="../src/aaa.js"></script>
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
<!-- テストコードをこの辺りに -->
<script src="./aaa.test.js"></script>
</body>
</html>
環境が整ったら
あとは好きなようにコードを書いてテストしていきます。
$ grunt watch
# 後はお好きにコードを書いてください
# src/ または test/ 以下のjsファイルやhtmlファイルが変更されると、勝手にテストが走ります
# grunt watch の終了は Ctrl + C でどうぞ
それでは、快適なJSの単体テストライフを！