JavaScript
test
frontend
ava
HALDay 20

avaで始めるフロントエンドテスト!

自己紹介

じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪3回生です。(2017/12/20現在)

イベントや、勉強会に参加してるので是非お会いした際はお声掛けください!

フロントエンドでもテスト書こう!

HALのみなさん、テスト書いてますか?

テスト...かいてますか????????

フロントエンドでテスト、導入してますか???

さて、僕はいま同年代の大阪HAL生でフロントエンドでテスト書いてる人みたことないんですがテスト書いていこう。という話

テストとはなにか

テストとはなにか。

コンピュータプログラミングにおいて単体テスト(たんたいテスト)あるいはユニットテストとは、ソースコードの個々のユニット、すなわち、1つ以上のコンピュータプログラムモジュールが使用に適しているかどうかを決定するために、関連する制御データ、使用手順、操作手順とともにテストする手法である。

なるほど。その名の通り、テストをするんだなと。

じゃあテストってどうやって書くの??

テスト書くならava使ってみようぜ

https://github.com/avajs/ava

まずロゴかっこよすぎる。それだけでava採用したいぐらいにはかっこいい。

インストール

$ npm install --save-dev ava

package.jsonにscriptを書いておきましょう。

package.json
"scripts": {
  "test": "ava --verbose"
}

使い方

avaはルートにある/testディレクトリを見に行ってくれる(どこを見に行くかは設定で書くことができます)ので、適当に作ってみます。

test/hoge.js
import test from 'ava'

// 基本形
test('タイトル', t => {
  t.pass()
})

タイトルのところには、なんのテストをするのかを書いておくといいです。

実行

npm scriptにかいているので、

$ npm test

で実行することができます。

スクリーンショット 2017-12-12 3.13.11.png

このようにテストに通ると、わかりやすくだしてくれます。

テストが駄目だった場合

スクリーンショット 2017-12-12 3.13.47.png

このようになぜテストが落ちたのか、どこで落ちたのかをわかりやすく表示してくれます。

もう少しだけ具体的なテストを書き足したいと思います。

test/hoge.js
import test from 'ava'

// 基本形
test('タイトル', t => {
  t.pass()
})

test("1 + 1 = 2", (t) => {
  const a = 1
  const b = 1

  t.is(a + b, 2)
})

1 + 1は2だなと。なにかとなにかが同じであるか見るときは、.isと言うのをつかいます。

この結果をみてみると

スクリーンショット 2017-12-12 3.17.38.png

テストに通っていますね!

avaのアサーションは他にもいろいろありますが、詳しくはREADME.mdを参照ください。

では、最後に非同期のもののテストをかいていきます。例えばAPIにアクセスした結果のステータスコードは200である。みたいなテストを書くのに良いかもしれません。

test/hoge.js
test("async test", async (t) => {
  const res = await new Promise((resolve) => {
    setTimeout(() => {
      resolve("hoge")
    }, 5 * 1000)
  })

  t.is(res, "hoge")
})

とりあえず、5秒の待ち時間を与えてみました。

async/await でさっぱりキレイにかけるので、いいですね!

この結果は

スクリーンショット 2017-12-12 3.24.43.png

キチンと通っていますね!

あとがき

テストをあまり書いたこと無い人も是非、テストガンガンかいていきましょう!!

詳しく使い方を見たい人はいい記事があるのでそちらを参照ください。

ava で始めるテスト自動化入門 実践編

Twitterしています!ぜひフォローください。 @konojunya

そんなに大したこと書いてないですが、一応ソースコードはkonojunya/ava-test

にあります!