【Vue Test Utils】コンポーネントテストでVeeValidateを使用する
今回はVue.jsのバリデーションライブラリである「VeeValidate」とコンポーネントテストライブラリの「Vue Test Utils」を使用してコンポーネントテストでバリデーションエラーを検証します。「VeeValidate」を「Vue Test Utils」で使うためにはいくつか
2022年 7月の記事一覧
記事数
11
【Vue Test Utils】overwriting methods via the methods property is deprecatedの対処法
開発環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1発生条件createdフックなどで初期化処理などを
【Vue Test Utils】Unknown custom element: router-viewの解決法
テスト環境@vue/cli-service@4.5.15@vue/test-utils@1.3.0@vue/vue2-jest@27.0.0vue-jest@3.0.7jest@27.5.1テスト実行とエラー処理コンポーネントテストを実行
【Vue.nextTick】DOMの変更を検知して処理を行う方法
Vue.nextTick( [callback, context] )Vue.nextTick()を使用すると、Vue.jsがデータの変更に基づいてDOMを更新した後に、何らかの処理（コールバック）を行うことができます。例えば、特定要素のclass名やテキストが変わったタイミングな
【Vue.js】provide/injectでデータバインディングする
※ 当記事はvue@2.7.4で動作確認を行なっています。provide/injectの仕組み従来のVue.jsでは、コンポーネント間のデータバインディングにはPropsを用いてきましたが、大規模なアプリケーションでは大量のデータバインディングが発生し、コードのメンテナンスが大変で
【cypress-file-upload】ファイルアップロードのテスト
e2eテストを実施する際に、ファイルアップロードをテストしたいケースもあると思う。特にシステムの場合は必ずと言っていいほどファイルのアップロード機能は存在する。今回はcypressでファイルアップロードをテストする方法を解説する。結論、cypress-file-uploadというライブラリ
【Firebase×Vue】signInWithRedirectで正常に画面遷移させる方法
signInWithRedirectは、Firebase Authenticationで外部認証(Google, Facebookログインなど)を実装する際に使用するメソッドだ。公式ドキュメントではsignInWithPopupというホップアップ形式の認証方式も紹介されているが、モバイルデバイス対
【Jest】非同期関数(Promise,async await)のテスト
今回はJavaScript テスティングフレームワーク「Jest」を使って非同期関数をテストします。テストの基礎的な概念は公式ドキュメントで十分なのですが、公式ドキュメントには実際にデータを取得する非同期関数がなかったので実用的なサンプルコードを用意しました。公式ドキュメント：非同
VeeValidateでVue.jsアプリのバリデーションを実装
「VeeValidate」は、Vue.jsアプリケーション用のバリデーションライブラリです。今回は、VeeValidateの導入手順と使い方について解説します。当記事の開発環境は以下の通り。vue@2.7.4vue-cli@5.0.8vuetify@2.6.7実
【Vue.js】ApexChartsでグラフやチャートを生成する手順
アプリケーションを開発していると、様々なデータをグラフで表現する場面があるかと思います。今回は「ApexCharts.js」というグラフ用のライブラリを使用してドーナツチャートを生成します。Chart.jsなどのライブラリと比較しても、かなりシンプルに実装できるのでおすすめです。管
【Vue.js】特定要素以外のクリックを検知して処理を行う方法
実装イメージ今回は、「メニューボタン」と「選択肢メニュー」以外がクリックされた際に、選択肢メニューを非表示になるように実装します。動作実際の動作は「Result」タブからご確認ください。ボタンと選択肢メニュー以外がクリックされた際に、選択肢メニューを非表示にするよう
