1. HOME
  2. ブログ
  3. IT技術
  4. 【Flutter】mock_web_serverを用いてAPIクライアントのテストを書いてみた

【Flutter】mock_web_serverを用いてAPIクライアントのテストを書いてみた

はじめに

Retrofitを用いて実装したAPIクライアントのテストの書き方を調べる際にパッケージのリポジトリを漁っていたところ、mock_web_serverというパッケージを使用するとテスト内でモックサーバーを立てることができることがわかりました!

そこで、今回はmock_web_serverを用いてRetrofitで実装したAPIクライアントのテストを書いてみます!

retrofit の sampleテストコード

開発環境

開発環境は下記のとおりです。

Flutter3.0.5

使用パッケージ

retrofit3.0.1+1
mock_web_server5.0.0-nullsafety.1
dio4.0.6
json_annotation4.6.0
build_runner2.2.0
json_serializable6.3.1
retrofit_generator4.0.2

mock_web_serverを用いてAPIクライアントのテストを書く

APIクライアントの実装

それではテストの対象となるAPIクライアントを実装していきます。

本記事の目的はテストを書くことにあるので、APIは架空のものとします。

まずは使用パッケージをpubspec.ymlに追記します。

続いてモデル作成です。

タスクを扱うモデルを作成します。(自動生成も同時に行います。)

次にAPI クライアントのクラスを作成します。(こちらも同様に自動生成を行います。)

テストの実装

それでは上で実装したAPIクライアントのテストを書いていきます。

まずはmock_web_serverをpubspec.ymlに追加します。

次にテストファイルを作成します。

テストを書いていく前に、すべてのテストで使うことになるMockWebServerのインスタンスを返却するメソッドを追加します。

やっていることは下記のとおりです。

  1. MockWebServerのインスタンスを生成
  2. 各テスト終了時にMockWebServerを停止する処理を追加
  3. MockWebServerを起動
  4. server.enqueue でサーバー側からのレスポンスを定義(ここでHttpStatusCodeを設定することもできます)
  5. MockWebServerのインスタンスを返却

ここで作成したインスタンスを用いることでモックサーバー向けにAPIを実行でき、リクエストやレスポンスの内容をテストできるようになります。

それではテストを実際に書いていきます。
確認事項は下記です。

  1. リクエストURLが期待どおりであること
  2. ヘッダーが期待どおりであること
  3. リクエストに含まれている情報が期待どおりであること

      1. リクエストURLが期待どおりであること

      リクエストURLは takeRequest() で取得したリクエスト情報から .uri.path で取得できます。

      2. ヘッダーが期待どおりであること

      ヘッダー情報は takeRequest() で取得したリクエスト情報から .headers で取得できます。

      3. リクエストに含まれている情報が期待どおりであること

      リクエストに含まれているbodyやqueryは、 takeRequest() で取得したリクエスト情報から .body.query で取得できます。

      まとめ

      これでAPIと実際に通信しなくても期待通りに動くことが担保できるようになりました!

      テストを書くことで実際に疎通せずとも実装ミスに気づけたりもするので、なるべく書いていきたいですね!

      書いた人はこんな人

      広告メディア事業部
      広告メディア事業部
      「好きを仕事にするエンジニア集団」の(株)ライトコードです!

      ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
      現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
      いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

      システム開発依頼・お見積もり大歓迎!

      また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
      インターンや新卒採用も行っております。

      以下よりご応募をお待ちしております!
      https://rightcode.co.jp/recruit

      関連記事

      採用情報

      \ あの有名サービスに参画!? /

      バックエンドエンジニア

      \ クリエイティブの最前線 /

      フロントエンドエンジニア

      \ 世界を変える…! /

      Androidエンジニア

      \ みんなが使うアプリを創る /

      iOSエンジニア