【Svelte】プロダクトで採用しているテストフレームワークについて/NextbeatTechBar-20221027-1

2022年10月27日に開催された「Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会」にて発表した資料です。

https://nextbeat.connpass.com/event/262586/

Transcript

1. Copyright © nextbeat All Rights Reserved プロダクトで採用している テストフレームワークについて Copyright © nextbeat All Rights Reserved 株式会社ネクストビート TechnologyDivision Platform 石川侑樹
2. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 2 自己紹介 • 石川 侑樹（いしかわゆうき） • 株式会社ネクストビート ◦ TechnologyDivision Platform ◦ 組織横断の技術課題などの解消 • 直近の業務 ◦ 主要プロダクトの技術移行（to Svelte）
3. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 3 今日伝えたいこと Svelteはテスト周りもイイ感じ！
4. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 4 TestingLibrary + Vitest TestingLibrary • コンポーネントの粒度でのUIテストライブラリ • React, Vue, Svelte, Angular, Preact, etc… に対応 Vitest • Vite環境での高速なテストランナー • Viteビルドを推奨しているSvelteKitとの相性◎
5. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 5 Playwright-ct Playwright • Microsoft製E2Eテストフレームワーク Playwright-ct • Playwrightの環境を使用したコンポーネントテスト • React, Vue, Svelteに対応
6. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 6 Playwright-ct メリット • 実際のブラウザでの操作を検証 • クロスブラウザテスト → より信頼性の高いテストが可能 デメリット • SvelteKit（まだ）未対応...
7. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 7 つまり • テストフレームワークの選択肢も多くなってきている • テスト界隈でもReactやVueなどの 代表的なフレームワークと同列に扱われている → 将来性が認められている
8. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 8 実際にSvelteのテストを導入してみた所感 • テストの実装自体は簡単にできた • Svelteの特徴「コード量を減らす」が活きているかも？ ◦ mock化するところも少なくなるはず ◦ カバレッジ的なことを考えてもコード量が少ないほど 実装時間・テストコード量も少なくなるはず
9. Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 9 良いSvelteテストライフを！