ユニットテストの単位
- コンポーネント単位
どのようなテストを記述するか?
マークアップが変化していないか。
Vue.jsであればvue-template-compilerというライブラリにかなり依存するテスト項目になるかと思いますが。
コンポーネントに意図した子コンポーネントを含んでいるか
インターフェイスの部分(インプット、アウトプット)
インプットの例
- data
- 親コンポーネントから受けるprops
- ボタンクリック
- ライフライクルメソッド
- Vuexのデータ
- Vue Routerのパラメータ
アウトプットの例
- DOMの描画
- ルーティングの変化
- Vuexの更新
- 子コンポーネント へのパラメータ渡し
- コンポーネントから呼び出すイベント
どのようなライブラリを使うか?
Vue Test Utils
Vue.jsのテストコードで最も一般的なライブラリで標準フレームワークになっています。
基本的な書き方
1 2 3 4 5 6 7 8 9 |
import { mount } from '@vue/test-utils'; import コンポーネント名 from '/コンポーネント名.vue' describe('説明', () => { it('テストケース', () => { const wrapper = mount(コンポーネント名) wrapper.vm.msg = "テスト"; }) }) |
mount
VueインスタンスとDOMノードを返してくれます。
shallowMount
子コンポーネントをスタブ化して無視します。基本的にはコンポーネントは独立してテストをした方が良いのでmountよりはshallowMountを使った方が良いと言われています。
wrapper.vm.msg
コンポーネントのデータである「msg」にアクセスします。wrapper.vmはVueインスタンスを示します。
その他メソッド
toMatchSnapshot
出力されるマークアップ(HTML)が最新のスナップショットと一致しているかどうかチェックしてくれます。最新のスナップショットは「__test__」配下に「__snapshots__」フォルダを作成して配置します。
なお、比較先のスナップショットを更新したい場合は下記コマンドを実行します。(タスクランナーにjestを使用している場合)
1 |
jest --updateSnapshot |
contains
指定したコンポーネントを含んでいるかチェックします。
1 |
expect(wrapper.contains(コンポーネント名)).toBe(true) |
テストの実行方法
package.jsonのscriptにtestでjest(タスクランナー機能)を紐付けます。
1 |
npm test |
Jest
Vue Test Utilsで記述したテストコードをJestのタスクランナー機能を利用して実行するのが一般的です。
この記事へのコメントはありません。