Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VueTestUtilbrのキホンの『キ』
Search
ツノ
September 20, 2022
Technology
0
150
VueTestUtilbrのキホンの『キ』
ツノ
September 20, 2022
Tweet
Share
More Decks by ツノ
See All by ツノ
エンジニア達の_完全に理解した_-コードでの契約ってなんだ_.pdf
2nofa11
1
150
Vite完全に理解した その1
2nofa11
2
250
年末年始に「chibivue」で Vueヂカラをつけた
2nofa11
0
270
「世界一流のエンジニアの思考法」 を完全に理解した
2nofa11
1
250
書籍「プログラマー脳」を完全に理解した
2nofa11
0
59
VuexからPinia移行に向けて
2nofa11
0
400
一か月半かけて、TypeScript本を写経した話
2nofa11
0
780
Other Decks in Technology
See All in Technology
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
120
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
1.9k
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
7
69k
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
110
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
700
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
2
320
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
110
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
420
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
150
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
790
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
RailsConf 2023
tenderlove
30
1.2k
Making Projects Easy
brettharned
117
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
Vue Test Utils のキホンの『キ』 ツノ:@2nofall
自己紹介:経歴 2016~2020 官公庁系の SIer:WF 型の SI 業務 2021~2022/9 SaaS の会社で営業部門の社内
SE GAS や RPA を使った業務の自動化 2022/10~ 部署異動し、フロントエンジニアに! Vue+TypeScript を使った自社プロダクト
自己紹介:趣味 銭湯・サウナ クライミング ゆっぽくん
LT 参加の背景 10 月に開発部署への異動 異動先はフロントエンドエンジニア ※前職は BE 周りで技術力に不安あり 異動先で使うスキルの以下習得が必須 Vue
TypeScript FE フレームワークのテスト知見 今回
LT の目的 アウトプットによる知識定着 1. 「ユニットテスト」について 2. Jest の使い方 3. 「モック」について
4. Vue Test Utils の使い方 ※学習した内容について、 誤りがあったらご指摘ください!
ユニットテストについて 言葉の定義 独立したソフトウェアの最小単位テスト 単体テスト・コンポーネントテストとも 広い意味で同義 重要性 コーディングによるバグを早期に検知修正 動く仕様書として活用
Jest について ユニットテストをするためのツール JavaScript テスティングフレームワークの 一つ フロントエンド FW (React Vue)との相性
本 LT では環境構築については省略
Jest の使い方(基本) 右の関数をテストする場合 const double = (arg) => arg**2; 今回は
② ~ ④ 部分を中心にお話します!
「モック」について 個人的なユニットテストつまづきポイント モックアップの直訳は「実物大の模型」 イメージ図は以下の通り
Jest での Mock について Jest でのモック生成 ⇛ jest.fn 以下例の場合、「user.addHobby」をモックとしてモック作成
ここまでの Jest を理解すれば、 Vue Test Utils も基本は使える! ※ここから先は Vue 初学者レベルの知識を要します
Vue Test Utils について 公式サイトより 実装の詳細に依存せずに コンポーネントテスト用のツール vue testing library
は、 vue-test-util をベースしたライブラリ (今回は対象外) vue-test-utils は Vue.js 向けの公式単体テストライブラ リです。 “ “
VTU:コンポーネントのマウント VTU とテスト対象のコンポーネントをインポート コンポーネントを mount し wrapper を利用 ※shallowMount を使うと子コンポーネントがスタブ化
VTU:props マウント時の第二引数として指定 props の値を途中で変えたいときには setProps を使用
VTU:slot マウント時の第二引数として指定 slots{ 名前:コンポーネント }として slot 先を指定
VTU:emit wrapper に対して emitted を使用して、発火されたイベントを取得
VTU:Vuex と Vue Router global.plugins : 実際の Store・Router をインポートしたテスト global.mocks
:Store・Router をモック化してテスト実行 ⇛global.mocks のほうが、対象をコンポーネントに向けられる。 今回は、 global.mocks の説明
VTU:Vuex mock として store を定義し、マウント時の第2引数として指定
VTU:Vue Router コンポーネントで使用する route の params、 mock として router を定義しマウント時に第二引数として指定
気づき Jest~Vue Test Utils について、 ちょっとわかる様になった。 コンポーネントに関してのテスト、 よく考えられているなと感じた。 モックやスタブの概念が曖昧だと つまづきやすい。