jest.config.jsの設定を見直す 実行時に警告が出てくる場合は、以下の設定をjest.config.jsに追加しましょう。 webpackを導入しているならpackage.jsonに記載してもOKです。 transform: { ... 'vee-validate/dist/rules': 'babel-jest', }, transformIgnorePatterns: [ '<rootDir>/node_modules/(?!vee-validate/dist/rules)', ], 参考：Testing Caveats | VeeValidate https://logaretm.github.io/vee-validate/advanced/testing.html#asynchronous-testing setup時にVeeValidateのコンポーネントを読み込む

本文書はJestとVue Test Utilを利用したVue.jsでのテストに関する2回目の記事で2回目となる今回はテスト入門者にとって少しわかりずらいStub(スタブ)やMock(モック)、Shallow Mountに注目して説明を行っています。 Stub, ShallowMountとMountの違いを説明した後にVue.jsのHTTPリクエストで頻繁に利用されるaxiosのMock(モック)の方法についても説明を行っています。コンポーネントの単体テストでは、axiosライブラリやfetch関数を利用した外部へのアクセスを伴う機能を実装している場合モックを利用することで外部へのアクセスを行うことなくコンポーネントのテストを実施することができます。 Vueでのテストを実施したまたは学習した経験がない人であれば先に前回公開した”【基本編】Jestを利用してVue コンポーネントをテストする方

こんにちは、CX事業本部 IoT事業部の若槻です。 JavaScriptのテスティングフレームワークJestでは、テスト対象のModuleやFunctionのモックを作成するためのJest Objectがいくつか用意されています。 The Jest Object · Jest 今回は、そのJest Objectのうちのjest.spyOn()の基本的な使い方を確認してみました。 確認してみた 確認を実施した環境は次の通りです。 npm ls jest typescript --depth=0 hoge-project@0.1.0 ├── jest@26.6.3 └── typescript@3.9.10 jest.spyOn(object, methodName) jest.spyOn(object, methodName)を使用すると、Methodを含んだObjectのmock func

はじめに みなさんこんにちは。LINEのフロントエンドエンジニアの藤井です。年末年始に実施した「LINEのお年玉」キャンペーンも今年で４回目の実施となりました。 今年は過去４年で経験した様々な反省点を振り返り、様々な改善を行いました。今回はそのなかの一つである「ビジュアルレグレッションテスト」の実施についてご紹介します。この記事では、ビジュアルレグレッションテストを運用していく上で工夫したことや、得られた知見などを共有したいと思います。 案件の特徴を紹介 まずは「LINEのお年玉」キャンペーンの特徴をご紹介します。 デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーンや「LINEのお年玉」におけるフロントエンドでの UX へのこだわりでも紹介されていますが、毎年年末年始に行われるキャンペーンとして、トラフィックが多いアプリケーションを、短期間