vitestはじめるまで

Transcript

1. vitestはじめてみるまで ２０２４年 １１月 ７日 ぴさ(x: @pisa40338570) akihabara.any #2【ノンジャンル技術系LTイベント】

2. 1 2 3 自己紹介 vitestとは アジェンダ vitest導入とテストまで

3. 自己紹介 1 2 3

4. 出身: 福岡県 就職してからの居住地: 大阪(新卒)->名古屋(転職1回目)->東京(今年・2回目) ぴさ＠SREエンジニア 事業会社で府省庁向けのサービス開発しています 　自己紹介 ビジネス向けPCのプリインソフト開発(C#) PCのデータ収集基盤開発(AWS, Python,

   TS) Sier転職してPL・PM 現在: 府省庁向けサービス開発(GCP, Nextjs) SREっぽいこと(CICD, その他改善活動)

5. 2 1 3 vitest(ヴィーテスト)とは

6. UnitTestとは プログラムコードの最小機能ユニットをテストするプロセス コード毎にユニットテストを作成し、変更があるたびにテストを自動実行することで早 期にバグやエラーを特定する 参照：https://aws.amazon.com/jp/what-is/unit-testing/

7. vitestとは モダンなフロントエンド開発を高速化するテストフレームワーク JavaScriptのテストフレームワークとして有名なJestと互換性があり、Jestと比較し てテスト実行のスピードが非常に早いのが特徴 JestからVitestへの移行ガイドや導入の記事が多い v1.0.0: 2023/12/5 release, latest v2.1.4

8. 3 1 2 vitest導入とテストまで

9. vitestの導入1 1.プロジェクトの作成と関連パッケージのインストール 前提としてインストールしているもの ・node: v22.1.0 ・pnpm: v.8.15.9 *インストールしているパッケージは過不足あるかも・・・

10. vitestの導入2 2.vitestの設定、ルートディレクトリにvite.config.tsを作成 3.(必須ではない)package.jsonの設定

11. vitestで行う簡単なテスト1 e.g. 足し算をする簡単な関数のテスト src/utils/sum.ts src/test/sum.test.ts pnpm run testで passedがでればOK

12. vitestで行う簡単なテスト2 e.g. 各テスト前に実行(DBのデータをクリアするようなケース) src/utils/user.ts 配列にデータを挿入・取得・削除するクラス src/test/user.test.ts 直前にaddUserが実行されているが addUser(‘Liliya’)はid=1にしたい 全てのテスト実行前に Clearを行う

13. vitest(jest)で便利と思ったところ 関数内部で利用している関数をmock化できる点！ src/utils/calc.ts src/utils/calcFunction.ts calcResultはadd, sub関数に依存してる もし、addが数十秒かかる処理だったら？ src/test/calcFunction.test.ts calcResultが使っているsumとsubを mock化して固定値を返せる

14. vitest(jest)で便利と思ったところ 少し前は関数やclassを引数受け取りしてテストコード作ってたので mock機能はとても便利

15. ご清聴ありがとうございました