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
vitestはじめるまで
Search
pisa-kun
November 07, 2024
Technology
0
110
vitestはじめるまで
pisa-kun
November 07, 2024
Tweet
Share
More Decks by pisa-kun
See All by pisa-kun
All golangでデスクトップアプリからwebアプリにデータ連携させる
pisakun
0
19
sre本読んだ感想
pisakun
0
400
githubのレポジトリから推しの変遷を見る
pisakun
1
120
Google Cloudで最近開発した色々_アイマスハッカソン2024
pisakun
1
110
Other Decks in Technology
See All in Technology
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
120
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
5min GuardDuty Extended Threat Detection EKS
takakuni
0
150
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
520
Prox Industries株式会社 会社紹介資料
proxindustries
0
310
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
990
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
290
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
A better future with KSS
kneath
239
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
How GitHub (no longer) Works
holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Optimizing for Happiness
mojombo
379
70k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Producing Creativity
orderedlist
PRO
346
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Transcript
vitestはじめてみるまで 2024年 11月 7日 ぴさ(x: @pisa40338570) akihabara.any #2【ノンジャンル技術系LTイベント】
1 2 3 自己紹介 vitestとは アジェンダ vitest導入とテストまで
自己紹介 1 2 3
出身: 福岡県 就職してからの居住地: 大阪(新卒)->名古屋(転職1回目)->東京(今年・2回目) ぴさ@SREエンジニア 事業会社で府省庁向けのサービス開発しています 自己紹介 ビジネス向けPCのプリインソフト開発(C#) PCのデータ収集基盤開発(AWS, Python,
TS) Sier転職してPL・PM 現在: 府省庁向けサービス開発(GCP, Nextjs) SREっぽいこと(CICD, その他改善活動)
2 1 3 vitest(ヴィーテスト)とは
UnitTestとは プログラムコードの最小機能ユニットをテストするプロセス コード毎にユニットテストを作成し、変更があるたびにテストを自動実行することで早 期にバグやエラーを特定する 参照:https://aws.amazon.com/jp/what-is/unit-testing/
vitestとは モダンなフロントエンド開発を高速化するテストフレームワーク JavaScriptのテストフレームワークとして有名なJestと互換性があり、Jestと比較し てテスト実行のスピードが非常に早いのが特徴 JestからVitestへの移行ガイドや導入の記事が多い v1.0.0: 2023/12/5 release, latest v2.1.4
3 1 2 vitest導入とテストまで
vitestの導入1 1.プロジェクトの作成と関連パッケージのインストール 前提としてインストールしているもの ・node: v22.1.0 ・pnpm: v.8.15.9 *インストールしているパッケージは過不足あるかも・・・
vitestの導入2 2.vitestの設定、ルートディレクトリにvite.config.tsを作成 3.(必須ではない)package.jsonの設定
vitestで行う簡単なテスト1 e.g. 足し算をする簡単な関数のテスト src/utils/sum.ts src/test/sum.test.ts pnpm run testで passedがでればOK
vitestで行う簡単なテスト2 e.g. 各テスト前に実行(DBのデータをクリアするようなケース) src/utils/user.ts 配列にデータを挿入・取得・削除するクラス src/test/user.test.ts 直前にaddUserが実行されているが addUser(‘Liliya’)はid=1にしたい 全てのテスト実行前に Clearを行う
vitest(jest)で便利と思ったところ 関数内部で利用している関数をmock化できる点! src/utils/calc.ts src/utils/calcFunction.ts calcResultはadd, sub関数に依存してる もし、addが数十秒かかる処理だったら? src/test/calcFunction.test.ts calcResultが使っているsumとsubを mock化して固定値を返せる
vitest(jest)で便利と思ったところ 少し前は関数やclassを引数受け取りしてテストコード作ってたので mock機能はとても便利
ご清聴ありがとうございました