Table of Contents

座学

• ⭕ TDD
• ⚠️ Test First
• JavaScript テスト界の歴史
  • jasmine, mocha, chai, sinon, jest...
• GROWI Project では…
  • Vitest: 単体テスト(unit test)、統合テスト(integration test)
  • Cypress: e2e test、(Component test <= いずれ)

Vitest について

対 Jest

• jestconfig.js, swc
• より config less
• Docs が良い
  • 使いたくなる Docs
• 内部で esbuild が利用されているため実行が高速

Vitest の走らせ方

• watch モード
  • 対話的にできるやつ。
• run モード
• デバッグ
  • devcontainer で web hosting
• カバレッジ測定
  • /index.html を Live Share で
• (ダッシュボード)

Examples in remark-lsx

Walk-through

• 基本セット
  • describe, test, it, expect(...).toXXX
• mock と spy
• vitest-mock-extended external_link 👈 超便利！
• vi.mock は hoisted, vi.doMock は not hoisted
• .each
  • Parameterized test

utils/depth-utils.ts

• 書く時は when -> then -> setup
• 最初は失敗させる

routes/list-pages/add-depth-condition.ts

細かい Tips

• .concurrent
• mock-require

config 編

• clearMocks: true
• globals: true
• vite-tsconfig-paths
• 環境変数は vite 準拠
  • VITE_ prefix