ゴール

クライアントサイドJavaScriptの、とくにDOMとか触らない部分をnode.jsでテストするのがゴールです。バッドノウハウかもしれませんが、大げさな作業もいらないので、軽くやるくらいなら問題無いと思います。

前提条件

npmインストール済

作業

まずプロジェクト作ります。

$ mkdir hello-node
$ cd hello-node
$ npm init

npm init後対話形式でプロジェクトの設定を聞かれますが、連打して終わせます。次にtestするためにmochaをnpm install --save mochaでインストールします。すると、package.jsonは次のようになります。

{
  "name": "hello-node",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mocha": "^3.2.0"
  }
}

npm testでmochaがtestディレクトリにあるテストを実行するようにpackage.jsonを書き換えます。

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "./node_modules/.bin/mocha test"
   },
   "author": "",
   "license": "ISC",

test用のファイル`calc-test.js'をtestディレクトリに作ります。

var assert = require("assert");

describe("calc", function() {
  it("add", function() { assert.equal(4, 1 + 3);});
  it("sub", function() { assert.equal(3, 4 - 1);});
  it("sub_", function() { assert.equal(2, 4 - 1);});
});

npm testするとちゃんとテストが走って、次のように標準出力されます。

> mocha test



  calc
    ✓ add
    ✓ sub
    1) sub_


  2 passing (7ms)
  1 failing

  1) calc sub_:

      AssertionError: 2 == 3
      + expected - actual

      -2
      +3

testが実行できることが確認できました。ここでsrcディレクトリを作って、そこに最終的にクライアントサイドで使う予定のjsファイル(ファイル名はbird.js)を作ります。

var Bird = function() {};
Bird.prototype.say = function() {
  return "ka-ka-";
};

try { module.exports = Bird;} catch(e) {};

ブラウザにはmoduleなんて編集は定義されてないので、try-catchでエラーを黙らせます。それでは、これをテストするファイルbird-test.jsを作ります。

var assert = require("assert");
var Bird = require("../src/bird");
describe("animal", function() {
  it("say", function() {
    assert.equal("ka-ka-", new Bird().say());

  });
});

npm testすると、bird-test.jsで定義したテストも実行されて、次のように標準出力されます。

> mocha test



  animal
    ✓ say

  calc
    ✓ add
    ✓ sub
    1) sub_


  3 passing (7ms)
  1 failing

  1) calc sub_:

      AssertionError: 2 == 3
      + expected - actual

最後にhello-nodeディレクトリ上に次のHTMLファイルを作ってブラウザで開きます。

<html>
  <head>
  <title>hello</title>
  <script src="./src/bird.js"></script>
  </head>
  <body>
  </body>
</html>

ディベロッパーツールのコンソールで動作することを確認します(画像はChrome)。

このときのディレクトリの構成は次のようになっています。

.
├── index.html
├── node_modules
│   └── mocha
├── package.json
├── src
│   └── bird.js
└── test
    ├── bird-test.js
    └── calc-test.js

クライアントサイドJSをnode.jsでテストする

ゴール

前提条件

作業