はじめてのJavaScriptテスト

# 1. JavaScriptのテストとは？
プログラムが期待どおりに動くかどうかを確認する**「テスト」**。
今回は**JavaScriptにおけるテスト**について、

「聞いたことはあるけど実際に書いたことはない」(´・ω・｀)
「ﾏﾝﾄﾞｸｾ…」('A`)
「なにそれおいしいの？」(^q^)

…という方を対象に、とりあえず細かいことはおいといて、実際に手を動かして体験していただくまでを目的として書いてみました。

ここでいう**「テスト」**とは、```console.log```などでチェックする**手動的**な方法ではなく、**プログラム（テストフレームワーク）**を用いて**自動的**に実行する方法です。

まあ、とりあえず、やってみましょう！

# 2. Jestとは？
**JavaScript**には[Mocha](https://mochajs.org/)や[Jasmine](https://jasmine.github.io/)などさまざまな**テストフレームワーク**がありますが、今回は[Jest](https://jestjs.io/ja/)を使ってみます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/221915/2b48a508-7cfb-f2e8-3225-1e299786de2b.png" width="70%">
**Jest**は**Facebook**が提供している[MITライセンス](https://ja.wikipedia.org/wiki/MIT_License)の**オールインワン**テストツールです。[公式ドキュメント](https://jestjs.io/docs/ja/getting-started)も親切で**日本語**にも対応しており、**「エンジニアがすぐに使える」**ことをウリにしています。

# 3. 環境構築
まずは[Yarn](https://yarnpkg.com/lang/ja/)で**Jest**をインストールしましょう。

```Bash
yarn add --dev jest
```

[npm](https://www.npmjs.com/)の場合は

```Bash
npm install --save-dev jest
```
です。

# 4. 書いてみる
とりあえずこんなファイル構成で進めてみます。

```:jest-trial
jest-trial
├── getTriangle.js
├── getTriangle.test.js
└── package.json
```

**getTriangle.js**にはメインとなる関数を書きます。
例として三角形の面積を求める関数にしました。
別ファイルでも読めるように、とりあえず**module.exports**でもしておきましょう。

```JavaScript:getTriangle.js
getTriangle(base, height)=> {
  return base * height / 2;
}

module.exports = getTriangle;
```
さて、いよいよ**getTriangle.test.js**に以下のようなテストコードを書きます。

```JavaScript:getTriangle.test.js
const getTriangle = require('./getTriangle');

test('getTriangle base 3 * height 2 / 2 equal 3', () => {
  expect(getTriangle(3, 2)).toBe(3);
});
```

1行目でテストの対象となる関数を読み込んでいます。
**test**や**expect**は**Jest**の構文ですが、そのまんまの意味なのでわかりやすいですね。
```'getTriangle base 3 * height 2 / 2 equal 3'```の部分はテスト結果が表示されるときに、何をどうチェックするテストなのかということがわかる説明を書いておきます。
**toBe**は```===```を使用したいわゆる**厳密等価**をテストする**マッチャー関数**です。
**マッチャー**とは**Jest**が用意しているAPIのことで、これによりさまざまな条件をテストすることができます。
※マッチャーリストは[こちら](https://jestjs.io/docs/ja/expect)。

最後に**package.json**にテスト実行のためのタスクを追加します。

```Json:package.json
{
  "scripts": {
    "test": "jest"
  }
}
```

**『北斗の拳』**の**ゲイラ**のように**「あ～～～！！めんどくせえ！！息をするのも面倒でいやだ」**という方のために、ここまでのコードを置いておきます。
[https://github.com/p-toro/jest-trial](https://github.com/p-toro/jest-trial)

# 5. 動かしてみる
それではさっそくテストを動かしてみましょう！（タッターン！）

```Bash
yarn test
```
もしくは

```Bash
npm test
```
おお！すると以下のようなメッセージが表示されました。
<img width="428" alt="captcha1.png" src="https://qiita-image-store.s3.amazonaws.com/0/221915/d9785d0b-19ca-9a8a-3508-15a7a4715bc2.png">

問題なくパスしているようですね。

では、ためしに**getTriangle**関数を以下のように変更してみましょう。
```*```を```+```にしました。

```JavaScript:getTriangle.js
const getTriangle = (base, height)=> {
  return (base + height) / 2;
};
```

これで再度テストを実行してみるとどうなるでしょうか…？
<img width="553" alt="captcha2.png" src="https://qiita-image-store.s3.amazonaws.com/0/221915/d4d0e3de-43b5-e0ae-f377-88798be8c2a1.png">


まあ、あたりまえですが、エラーになりました。よかったよかった。

# 6. やってみた感想
実際には[react](https://reactjs.org/)や[Vue.js](https://jp.vuejs.org/index.html)などのフレームワークが関係したり、[TypeScript](https://www.typescriptlang.org/)や[webpack](https://webpack.js.org/)を使用したり、十分な作業時間が確保できない場合など、いろいろな条件・状況があり、導入はなかなか困難なケースが多いかもしれません。

しかしながら、テストが重要であることは間違いないですし、いますぐにテストを導入することがないプロジェクトだとしても、常にテストの意識を持ってコードに臨むということが大事だと思いました。

以上です。