SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptでテストを書こう!

コードの健康状態を保て! Jenkinsとtestemを使って、JavaScriptで継続的インテグレーション(CI)を行う

JavaScriptでテストを書こう! 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

testemのその他機能

 testemにはその他にも様々な設定や機能が用意されていますので紹介します。

1)読み込みしないJavaScriptファイルの指定

 「src_files_ignore」を設定すると、例えば画面関連のJavaScriptなどテストに関連しないJavaScriptファイルを無視する設定ができます。

リスト5 src_files_ignoreの設定
src_files_ignore
{
  "src_files": [
    "js/**/*.js",
    "spec/**/*.js"
  ],
  "src_files_ignore": "js/screen/*.js"
}

2)テストの前処理と後処理

 テストの前処理と後処理に行うコマンドを指定することができます。「before_tests」が前処理で「after_tests」が後処理です。以下の例は、CoffeeScriptを使った例で、コンパイルし、テストを行い、後処理でコンパイルしたJavaScriptのファイルを削除する処理を行っています。

リスト6 src_files_ignoreの設定
{
  "before_tests": "coffee -c *.coffee",
  "src_files": [
    "*.coffee"
  ],
  "serve_files": [
    "*.js"
  ],
  "after_tests": "rm *.js"
}

3)テストページを用意していた場合

 JavaScriptのテストをブラウザで実行している場合は、すでにテストを実行するページ(HTML)を用意している場合があります。そのようなHTMLに対してもtestemはテストを実行することができます。

 testem.jsonにテストページ名を記述し、テストページのテスティングフレームワークを読み込んだ後にtestem.jsを読み込むscriptタグを追加すれば、あとは以前紹介したコマンドラインで実行する方法でテストを実行することができます。

リスト7 テストページの設定
{
  "test_page": "tests.html"
}
リスト8 テストページに追加するscriptタグ
<script src="/testem.js"></script>

4)CI機能

 testemをJenkinsなどの継続的インテグレーションツールで使用することを想定してCIコマンドが用意されています。testemコマンドにCIオプションを付けるだけで実行できます。実行すると、テストを実行している環境にインストールされているブラウザを自動的に実行し、テストを行います。テストの実行結果は、Jenkinsなどでテスト結果を取得できるTAP形式で出力されます。

リスト9 CIモードのコマンド
testem ci
リスト10 CIモードのテストの実行結果
ok 1 Chrome 39.0 - 1から始まる整数を変換する 3の倍数の時はFizzを返す.
ok 2 Chrome 39.0 - 1から始まる整数を変換する 5の倍数の時はBuzzを返す.
ok 3 Chrome 39.0 - 1から始まる整数を変換する 3の倍数かつ5の倍数の時はFizzBuzzを返す.
ok 4 Chrome 39.0 - 1から始まる整数を変換する 3と5の倍数以外はその数字を返す.
ok 5 Firefox 33.0 - 1から始まる整数を変換する 3の倍数の時はFizzを返す.
ok 6 Firefox 33.0 - 1から始まる整数を変換する 5の倍数の時はBuzzを返す.
ok 7 Firefox 33.0 - 1から始まる整数を変換する 3の倍数かつ5の倍数の時はFizzBuzzを返す.
ok 8 Firefox 33.0 - 1から始まる整数を変換する 3と5の倍数以外はその数字を返す.

1..8
# tests 8
# pass  8
# fail  0

# ok

5)その他testemコマンドのオプション

 testemコマンドのオプションは以下のとおりです。

表1 testemのオプション
オプション 説明
-h, --help ヘルプを表示します
-V, --version バージョン番号を表示します
-f, --file [file] testem.jsonのパスを指定します
-p, --port [num] ブラウザでアクセスするサーバのポートを指定します。 デフォルトは7357です。
--host [hostname] ホスト名を指定します。デフォルトはlocalhostです。
-l, --launch [list] テストを行うブラウザをカンマ区切りで指定します。
-s, --skip [list] テストをスキップするブラウザをカンマ区切りで指定します。
-d, --debug デバッグログを出力します。
-t, --test_page [page] htmlのテストページがある場合に指定します
-g, --growl growl 通知を行います

次のページ
Jenkinsとtestemをつなげてみよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptでテストを書こう!連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 安西剛 (ヤスニシ ツヨシ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8391 2015/01/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング