Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vueのテスト手法とVRTのススメ
Search
unotovive
February 05, 2020
Programming
5
8.7k
Vueのテスト手法とVRTのススメ
Bonfire frontend#5の登壇資料です
unotovive
February 05, 2020
Tweet
Share
More Decks by unotovive
See All by unotovive
Designship2022 デザインエンジニアが語る、隣接領域を学ぶということ
unotovive
2
3k
ゆめみのデザインエンジニア概要2022
unotovive
0
870
NIF2020 - Giral
unotovive
0
430
ふとした時に読みたくなる3冊
unotovive
0
160
【ABD】SCRUM BOOT CAMP p16-18
unotovive
0
86
ノンデザイナーズ・デザインツール
unotovive
1
420
Other Decks in Programming
See All in Programming
sbt 2
xuwei_k
0
130
JJUG CCC 2025 Fall: Virtual Thread Deep Dive
ternbusty
3
510
関数の挙動書き換える
takatofukui
4
760
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
150
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
4
1.7k
dnx で実行できるコマンド、作ってみました
tomohisa
0
120
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
tosuri13
4
240
FluorTracer / RayTracingCamp11
kugimasa
0
160
20251127_ぼっちのための懇親会対策会議
kokamoto01_metaps
2
370
俺流レスポンシブコーディング 2025
tak_dcxi
10
6.3k
2025 컴포즈 마법사
jisungbin
0
160
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
marcoroth
0
230
Featured
See All Featured
Scaling GitHub
holman
464
140k
The Language of Interfaces
destraynor
162
25k
Visualization
eitanlees
150
16k
Git: the NoSQL Database
bkeepers
PRO
432
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building Applications with DynamoDB
mza
96
6.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Agile that works and the tools we love
rasmusluckow
331
21k
KATA
mclloyd
PRO
32
15k
Transcript
Vueのテスト手法と VRTのすすめ Bonfire frontend#5 おとべ(株式会社ゆめみ)
自己紹介させてください
おとべです instagram twitter note github { , , , ,
} .com/unotovive
おとべです ・フロントエンド ・デザイン ・ゆめみでバイトしてる大学 生です。
本題
テスト書いてますか? フロントエンドで
テストについて初歩的な話 今日は おすすめのVRテスト と を話します
そもそもテストいる? フロントエンドで
弊社のフロントエンドエンジニアSさん
場合による
重い 案件が重い・実装が重い
案件の重さとテストの重さ ショボい案件 単体 テスト VR テスト E2E テスト
案件の重さとテストの重さ ショボい案件 単体 テスト VR テスト E2E テスト
バランスが必要 ショボい案件 単体 テスト
バランスが必要 デカくて ムズい 案件 単体 テスト VR テスト E2E テスト
バランスだけじゃ駄目 でも
どんなテストが必要か 考えて取捨選択する
どんなテストがあって どういう特徴で 何に適しているのか
Vueのテスト手法いろいろ テストを知る
単体テスト (コンポーネントテスト)
どんなテスト? ・機能や関数、コンポーネントなどの小さい単位で行うテスト ・小さい単位なので軽く高速であるべき ・常に100%を目指すべき
Vueでは?
Vueの単体テスト ・内部の実装(関数など)にフォーカスしすぎない ・コンポーネントのインターフェースをテストする ・@vue/test-utilsを使ってコンポーネントをマウントする
vue-test-utils
ブラックボックス? Props Render Actions component computed filter methods
ブラックボックス? Props Render Actions component computed filter methods 入り口と出口だけを気にする
https://www.youtube.com/watch?v=OIpfWTThrK8
ブラックボックス内に 子コンポーネントがある…
単体テストなので 子コンポーネントを一緒に チェックとかはしたくない
とか
子コンポーネントなので 渡しているPropsを変えて テストしたい
とか
子コンポーネントなので イベントが発行されている かをテストしたい
とか
全部Vue Test Utilsで 出来ます!!!
単体テストが適するところ ・ロジックが多い大型案件(自社サービスに多めな印象) ・権限周りとかで表示出し分けが複雑になってる所 ・サイトと言うよりはアプリケーションと呼ばれるような物
単体テストが適さない所 ・ペライチLP作ってください〜 ・要るわけがない ・複雑でないミニマルなアプリケーション(バランスを見て)
E2E Test (インテグレーションテスト)
どんなテスト? ・実際にブラウザを通して一連の操作を行ってみるテスト ・ブラウザを通すしストーリーがあるので都度とても長い ・開発の終盤にQAチームとかが手動でやったりもする
Vueでは? ・Vueと言うよりも出来てるアプリケーションで行うテスト ・そのためVue独自の何か、がある訳ではない ・正直なところ僕は大体QAチームに丸投げ
ということで詳しいことは スキップ Seleniumとか使うみたい
e2eテストが適するところ ・ 品質がとても大事な案件 ・QAチームを通す予定が無いもの ・継続的に機能改良などを続けていく大型の案件 ・ 品質がとても大事な案件 ・QAチームを通す予定が無いもの ・継続的に機能改良などを続けていく大型の案件
e2eテストが適さない所 ・QAさんがいる ・ある程度の信頼性が担保されてればまあ良い所
Visual Regression Test (画像差分テスト) 今日の推し
Visual Regression Test (画像回帰テスト) みんな使って
どんなテスト? ・今のスクショと前のスクショを比較してくれる ・1pxのズレも見逃さない ・予期せぬスタイル崩れとかを予防できる! ・開いてスクショトルのでソコソコに重い+遅い
こんなかんじ
Vueでは? ・Storybookのストーリー単位で見れる(Reg-suit+storycap) ・PR時にCIで動作し、GitHubやSlackにレポートを送信 ・僕の事を救ってくれたテストランキング第一位
Storybook ・ コンポーネント単位でUIを確認できる ・デザイナーとの疎通などが楽になる ・コンポーネントカタログ的な使い方ができる
Storybook
None
Reg-suit ・「よしなに」VRTをやってくれる ・レポートをS3とかに上げて自動共有 ・ドキュメントがとても充実してる
None
VueでVRTを使ってみる 超かんたん
カンタン3STEP 1.Storybookを入れて設定する 2.Reg-suitとStorycapを入れて設定 3.CIrcleCIの設定を書く(CIなら何でもいいけど)
これだけ!
せっかくなのでTips: ・CIで動かすDockerは公式のイメージを使うとイイ ・日本語の表示はDockerにフォントのインストールが必要
ほかのテストと違って Storyさえ書いてれば良い
VRTが適するところ ・中規模以上のアプリケーション ・大量にコンポーネント分けしてる場合 ・新規Joinのメンバーが来たりする場合
VRTが適さない所 ・さっさと作って終わり!メンテも改善も無し!みたいなの ・単一画面とかコンポーネント分けがされてない所(無くても ・PRを眺めただで関係ない所のCSSの問題が見抜ける神がいる
まとめ テストの種類が分かったので
バランスが大事 テストを実装するかどうかは
取捨選択をする テストの種類が分かったので
Unit テスト VR テスト E2E テスト 規模やアプリケーションの形態に 応じて使い分ける 高い信頼性が必要なときや 工数に余裕があるときにプラス
選択の指標
Vue Test Utilsを使っとけば 間違いないしカンタン Vueのテストは
VRTはフロントエンドとして とても良い選択肢 認知度低めの
平和なエンジニアライフを 目指しましょう 何が必要か考えて
最後に宣伝
Yumemi.vue#6 2/2 (木) Roppongi.vue#5 2/25 (火)
おわり まさかり歓迎です。優しく投げて下さい。