【初心者向け】FrisbyとJESTを使ってAPIのテストを書いてみる

はじめに

【Attention】
私はQAエンジニア（SETではない）なので、コーディングは専門外です。
適当な事を言っていると思います。
間違っている事、もっと「こうしたらいい」色々あると思いますが、ご容赦ください。

なんでAPIでテストしようと思ったか

テスト自動化したいなと思ったのと、テストピラミッドを勉強してE2Eだけでは今後の運用に耐えられそうにないと思っていたのと、文字数制限のテストや、メールアドレスの形式テスト、文字種のテストとか正直めんどくさいと常々思っていたからです。
人しかできないことを人がやった方がずっとずっとコスパがいいので、人がやらなくていいことはコードにおまかせしたかったので

#なぜFrisby？
一人ではメンテをしていけないと思ったのと（エンジニアの協力が必須）、社内に聞ける人がいっぱいいたからです！
karateが最近流行っていますが、BDD的な書き方がチーム内エンジニアの人があまり好かなかったというのもあります。みんなでメンテをしていかなければならないので、JSで書けるFrisbyを選択しました。

#準備した環境
PC：MacBook　Pro
OS：macOS Catarina10.15.1

node.js v12.7.0
VisualStudioCode

あとnpm？？　（このあたりは前になんかしたときに入っていた（かも）なので必要でしたらいれてください）

#環境準備
まず、nodeをインストールする必要があります。
nodeのインストールには以下の２つを用意する必要があります

• HomeBrew
• nodeBrew

HomeBrewは、Macに色々なものをコマンド１発でインストールしてくれるすごいやつ
nodeBrewはnodeのバージョン管理してくれるやつ

##HomeBrewをインストール
ターミナルを立ち上げて以下のコマンドを貼り付けて実行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

※HomeBrewがインストールされているかわからない方は、ターミナルを開いてbrew -vと打ってください。HomeBrewをインストールしたことがない人はターミナルを開いて以下のコマンドを実行してください。インストールされていたらバージョンが表示されます

##nodeBrewをインストール
ターミナルで以下のコマンドを実行
brew install nodebrew

##nodeのインストール
ターミナルで以下のコマンドを実行（最新版のインストール）
これでnpmもインストールされているらしい・・・？
nodebrew install-binary latest

##インストールが出来ているか確認する
以下のコマンドを実行してバージョンが表示されていれば、ダウンロードができています
node -v
npm -v

#環境構築
FrisbyとJESTをインストールしていく

１.　とりあえず、ホームディレクトリ配下にディレクトリ（フォルダ）を作成する
mkdir hogehoge

２.　作成したディレクトリに移動する
cd hogehoge

３.　作成したディレクトリにFrisbyというディレクトリ（実際フリスビーをインストールするところ）とtestというディレクトリ（テストケースを入れる場所）を作成する
mkdir frisby
mkdir test

4.　作成したfrisbyディレクトリに移動する
cd frisby

5.　FrisbyとJestをインストールする
npm install frisby
npm install

6.　__tests__ディレクトリを作成する
　　※JESTは__test__ディレクトリ配下のテストを実施してくれるらしいです。なので__test__ディレクトリを作成していく

cd..　　　　 //一つ上のディレクトリに移動
mkdir __test__ 　　 //__test__ディレクトリの作成

これで環境構築は多分できました。

#テストを書いてみる
VisualStudioCodeで、testディレクトリを開き、__test__配下にhogehoge.spec.jsというファイルを作成する

※間違えて__test__ディレクトリを開いてしまうと、テスト走らない(´；ω；｀)と一時間迷う事になります

#ステータスコードのアサーション
アサーションとは期待値と結果を書くところだと認識しています。

hogehoge.spec.js

const frisby = require("frisby");

it("テストをする内容を自由に記載できる箇所", function(){
  frisby.post("https;//hogehoge", {"hoge":"hogeo"}).expect("status", 200);
//frisby.post("APIが叩いてるURL", 送るJSONボディ).expect("status", 返ってくる予定のステータスコード)
});

##Responseの内容のアサーション

hogehoge.spec.js

const frisby = require("frisby");

//返ってくる予定のJSON
{
    "hoge1": "ほげ１",
    "hoge2": "ほげ2"
}

//ここからがテスト
it("Responseのアサーション", async function(){
    const res = await frisby.get("https;//hogehoge"); 
　　//Responseを定数resに代入（Responseが帰ってくる前に下のテストを実行すると失敗するのでasync　awaitをつかう）
    expect(res.json.hoge).toBe("ほげ１");
   //定数resの中のjsonの中のキーホゲの中身はほげ１である
});

##テストの実行
VisualStudioCodeを使っている場合、左下にnpmスクリプトとというツリー？がでてきて、その下のtestという押すと自動的に流れてくれました。

#終わりに
大体この２つを書ければ、やりたい事は出来ました。（まずはスモールスタート方針）
悩んだのは、リクエストのBODYを定義したり継続してテストを実施したいので、返ってきた値を次のテストに利用したりすることでした。

テストについては一旦スモールスタートをしてみてどういう結果になるか試してみたいと思います！

##追記
APIのテストのサンプルを記載するのめちゃくちゃ難しかった・・・
説明するのに使えるなんかいいのないかなー(ﾟＡﾟ;)

そしてやっぱり環境構築が一番の難敵。
frisbyをインストールするときにWARNがいっぱい出てあわあわしていました。
（別に無視していいやつだったらしく、解決するまでに2時間ぐらい時間を使いました（｀ェ´））