このチャプターの目次
本セクションの目標
- テストコードを書くことの意義を理解する
- JS・TSのユニットテストの書き方と実行方法を理解する
- Vue.js(Nuxt.js)のユニットテストの書き方と実行方法を理解する
今回実施すること
- サーバーサイド・クライアントサイド両方のユニットテストのプログラミングを行う
なぜテストコードを書く必要があるのか
色々あるとは思うが平川は以下のように考えます
- 技術的負債を減らしソースコードの品質を高めていく作業（リファクタリング）が容易になる
- スプリントを回していく上でのデグレ防止
- テストを自動化することによって、再現性のあるテストを可能とできること
（参考）テストピラミッド
JS・TSのテストコードを書くために利用するライブラリ
- jest
- JS・TSをテストするためのライブラリ。デジ開発部ではjestを使うプロジェクトがほとんど。
- https://jestjs.io/ja/
- vue-test-utils
- Vue.jsやNuxt.jsをjestを使ってテストするときに使用する。create-nuxt-app等のcliコマンドでプロジェクトを作成する際にjestを選択すると自動的にインストールされる。
- https://vue-test-utils.vuejs.org/ja/
- Mocha、Chaiなど
- jestの他にも上記のようなテスティングツールがあります。気になる人は調べてみても良いかも。
テストコードが十分足りているかの判断材料
- テストコードのカバレッジ
カバレッジと言ってテストコードの網羅率を計算することが出来ます。
100%の網羅が出来ればもちろん良いですが、難しいケースもあるのでチーム内で何％以上の網羅が出来てればOKとすると言ったルールを決めると良いと思います。
使用頻度の高いテスト関数
一つ一つ説明しても分からないと思うので紹介のみ
jest全般
- describe
- it
- jest.fn
- spyOn
- jest.mock
- mockReturnValue
- mockResolvedValue
- mockClear
- beforeEach
- afterEach
- toEqual
- toBeTruthy
- toBeFalsy
- toHaveBeenCalled
- toHaveBeenCalledWith
vue-test-utils特有
- shallowMount
- toMatchSnapshot
- trigger
- find
- findAll
- setData
- setValue
などなど
テストの実行方法
- CLIで実行
-
jestコマンドを実行するとテストができる。基本package.jsonにjestコマンドを実行するコマンドがあるので、それをターミナル上で実行する。
-
- vscodeの拡張機能を使ってGUI上で実行
- 「jest runner」というvscodeの拡張機能が存在する。インストールするとGUIでテストを実行できる。
ライブコーディング＆課題
- サーバーサイドのテスト（昨日作ってもらったTODOアプリを題材にテストコードを書いていきます）
- ライブコーディング
- DynamoDBからデータを全件取得する機能のテスト
- DynamoDBにデータを追加する機能のテスト
- 課題（出来るところまで）
- DynamoDBから単一の条件で検索する機能のテスト
- DynamoDBからデータを削除する機能のテスト(最低ここまではやりたい)
- DynamoDBのデータを更新する機能のテスト
- DynamoDBのデータを複数の条件で検索する機能のテスト
- ライブコーディング
- クライアントサイドのテスト
- ライブコーディング
- DOMのスナップショットテスト
- 画面遷移のテスト
- 画面描画時のテスト
- APIリクエストのテスト
- ライブコーディング
参考URL