12周年記念パーティ開催! 2024/5/10(金) 19:00

基礎からわかる、Vue.jsのテスト

全4回

このシリーズではvue-test-utilsを用いたVue.jsのテストを解説します。通常のJavaScriptとは異なり、JavaScript、HTML、CSSをひとまとめにして記述するVue特有のコンポーネント=Vueファイルのテストを学びましょう。

最終回 slotのテストと結合テスト

最終回は、slotに関する単体テストと、コンポーネントとコンポーネントが連動する動作の結合テストの書き方を中心に解説します。結合テストはコンポーネント設計に影響を受ける部分ですので、コンポーネント設計の良し悪しを実感できます。

第3回 コンポーネントの動作テスト

コンポーネントの動作テストのポイントを踏まえつつ、コンポーネントのcomputedや<template>のDOMイベント、methodsのテストについて解説します。テストが対象とするチェック事項をシンプルに保つのがコツです。

第2回 propsのテスト

Vue.jsを使って書かれたサンプルアプリケーションについて、propsのテストなどの基本的なテストを書きます。テストのためのユーティリティ、vue-test-utilsの基本的なテスト機能と書き方について解説します。

第1回 テスト環境の構築

シリーズ第1回目ではVueのコンポーネントをテストする環境を整えます。そしてシンプルな構成のVueファイルに対してテストを行ってみましょう。まずはざっと概要を把握することが大切です。