まさ@ブログ書き込み中

自由に生きるための英語、プログラミング、考えごとについて色々書いています。

RailsエンジニアのためのJavaScriptテスト入門

f:id:masaincebu:20180907073609j:plain

こんにちは、まさです。

 

今回は、Railsエンジニアの僕がJavaScriptのテストをする必要が出てきた時に調べたことをまとめていきたいと思います。

 

なお、今回の記事はわかりやすさを重視したざっくりとした説明になります。ざっくりと理解するつもりでご覧ください。

 

記事のポイント

  • JavaScriptのテストは3種類ある

  • テストコードを書くにはテスティングフレームワーク、アサーションライブラリ、モック・スタブを使う

  • トランスパイラとタスクランナーやブラウザでテストを実行する

 

3種類のJSテスト

JavaScriptのテストは、Railsのテストと同じように、3種類あるようです。単体テスト、統合テスト、機能テストです。Railsのテスト(RSpec)では単体テスト(ユニットテスト)、統合テスト(フィーチャースペック)、UIテストと呼んだりします。

 

RSpecについてはこちらが詳しいのでぜひご覧ください。

【Rails・RSpec】テストコードの種類についてまとめます - まさ@ブログ書き込み中

 

MinitestやRSpecをやっているとイメージしづらいですが、JavaScriptではテスティングフレームワークによっては単体テストのみをカバーしていることがあるみたいです。

 

例えばFacebook社がOSSとして開発を進めているテスティングフレームワークであるJestがその1つです。

Jest · 🃏 Delightful JavaScript Testing

 

次は、JavaScriptでテストコードを書く際に考えなければならないことについてまとめてみます。

 

テストコードを書くためのツール

テストコードを書くためのツールは大きく分けてテスティングフレームワーク、アサーションライブラリ、スタブ・モックがあります。

 

テスティングフレームワーク

JavaScriptでテストコードを書くには、RubyやRailsのテストコードを書く時と同じようにテスティングフレームワークが必要になってきます。

 

JavaScriptで有名なテスティングフレームワークはMochaJasmineなどがあります。Mochaの書き方の例は以下のようなものになります。

 

import { expect } from 'chai';
import add from './my-add-function';

describe('add( ) の機能', ( ) => {
 it('1 + 1 は 2 になる', ( ) => {
  expect(add(1, 1)).to.equal(2);
 });

 it('負の数も扱うことができる', ( ) => {
  expect(add(-1, 1)).to.equal(0);
 });
});

引用元 :https://dackdive.hateblo.jp/entry/2016/06/26/192248

 

RSpecを知っている人であれば親近感が湧く書き方ですね。

 

アサーションライブラリ

MinitestやRSpecでいうassertやexpectというようなチェックをするメソッド(アサーション)はMinitestやRSpecに元から備わっているものですが、例えばMochaはサードパーティによってアサーションを使えるようになります。

 

アサーションライブラリとして有名なのがChaiです。

 

モック・スタブ

RSpecではモックやスタブもそのままつくることができますが、MochaはSinon.jsというもの使ってテストダブルをつくるみたいです。

 

ちなみに、さきほど紹介したJasmineはアサーションもモックやスタブもそのまま入っているみたいです。

 

「それではJasmineがいいんじゃないのか」ということになりそうですが、どうやら一番有名なのはMochaみたいなので、実際に利用する方はもう少し調べることをおすすめします。

 

テストを実行するためのツール

RubyやRailsのテストとJavaScriptのテストの大きな違いは、実行環境です。RubyやRailsはサーバーサイドで動くのでコマンドライン上でテストを走らせばいいのですが、JavaScriptはブラウザで実行されるので、一工夫が必要になってきます。

 

その時に役に立つのがトランスパイラやタスクランナーになります。

 

トランスパイラ

僕が知る限り、トランスパイラの役割はブラウザで動かせるコードに変換することです。

 

トランスパイラは、ブラウザ以外で実行されるコードがブラウザで実行したかのように変換したり、新しいバージョンのJSのコードにブラウザが対応していない時にそのブラウザが理解できるように変換したりします。

 

ここで大切なのはそのうち前者の機能です。先ほど述べた通り、JavaScriptはブラウザで使われますが、テストはブラウザ以外で行われます。このままだと、ブラウザで読み込むライブラリを使ったテストをしたい場合は困ってしまうのです。

 

そこでトランスパイラが役に立つのですね。トランスパイラで有名なものにBabelやWebpackなどがあります。

 

タスクランナー

ブラウザ側で行われるDOM要素(ざっくりとHTMLの要素と思ってもらってOKです)の操作をテストしたい場合は、タスクランナーというものを使います。

 

タスクランナーはコードをブラウザに読み込ませ、自動でテストできるようにします。有名なものでKarmaやGulpがあるようです。

 

また、それと関連してテストの際にブラウザの画面を描画しない代わりに効率よくテストができるヘッドレスブラウザなるものがあります。その中で有名なのがPhantomJSです。

 

また、ChromeDriverはChromeブラウザを利用したテストにも実行できますし、ヘッドレスブラウザとしても利用できます。

 

 

今回はここまでです。僕も勉強中の身なので完璧な説明ができているとは思っていませんが、この記事が皆さんのJavaScriptのテストを理解する上で役に立ったら幸いです。