Web開発
Jest/Vitest インタラクティブコース(ブラウザで実行可能)
Jest/Vitest interactive course (runs in the browser) (howtotestfrontend.com)
要約
JestまたはVitestを使ったテストの基礎を学べる無料のインタラクティブコースです。アサーション、テスト、モック、非同期テストなど、フロントエンドアプリケーションのテストに必要な基本的な概念をブラウザ上で実践的に習得できます。バックエンド/Node.jsのテストにも役立ちます。
全文翻訳
Jest/Vitest Testing Fundamentals コース
JestまたはVitestを使ってテストする方法の基本を学びましょう。このコースでは、アサーション、テスト、モック、非同期テストなど、主要な機能について説明します。
これはReactフロントエンドアプリケーションのテスト方法を学ぶための準備です。このコースでは、フロントエンドアプリケーションのテストを開始する前に知っておくべきコアなJestとVitestの基礎を網羅しています。これには、JestとVitestでテストを書く一般的な方法、一般的なマッチャー、モックの操作、非同期動作などが含まれます。このコースを修了すると、本サイトのReactフロントエンドテストに関する主要なコンテンツに進む準備が整います。注:このコース全体は無料で(サインアップも不要)、バックエンド/Node.jsのテストを学びたい場合にも役立ちます。ほとんどの構文が非常に似ているため、JestとVitestの両方に対応しています。
19のレッスン
ブラウザでインタラクティブなテストランナー
コースレッスン
Jest/Vitest テストの基礎をすべて学ぶための19のレッスン
入門
1. 無料: 初めてのテスト
2 + 2が4に等しいことをアサートする簡単なテストを書き、基本的なテスト構造を理解します
開始済み 完了済み
2. 無料: test()とit()でテストコードを実行する
テストコードを記述する主要な関数test()とit()の紹介
開始済み 完了済み
3. 無料: describe()ブロックでテストを整理する
関連するテストとアサーションを独自のdescribe()ブロック内に配置して、テストを整理する方法
開始済み 完了済み
一般的なマッチャー
4. 無料: 一般的なマッチャー
toBe()、toEqual()、toBeTruthy()、toBeNull()のようなマッチャーと、それらをテストで使う方法を学びます
開始済み 完了済み
5. 無料: 数値のテスト
toBeGreaterThan()のようなマッチャーを使って数値をアサートする方法と、浮動小数点数の比較を処理する方法
開始済み 完了済み
6. 無料: 文字列のテスト
JestとVitestで文字列の比較とアサーションを行うテストの書き方
開始済み 完了済み
7. 無料: 配列のテスト
toHaveLength()のようなマッチャーを使って配列のサイズを照合したり、配列内の項目をアサートしたりする方法
開始済み 完了済み
8. 無料: オブジェクトのテスト
toContain()やtoMatchObject()のようなマッチャーを使って複雑なデータ構造を検証する方法
開始済み 完了済み
9. 無料: 否定(.not)を使ったテスト
.notを使って、.not.toBe()や.not.toEqual()のようなマッチャーを使って、期待とは逆のテストをする方法を学びます
開始済み 完了済み
基本的なテストの概念
10. 無料: 例外とエラーのテスト
toThrow()マッチャーを使って、コードがエラーを正しく処理するかどうかをテストする方法
開始済み 完了済み
11. 無料: Promiseを使った非同期テスト
async/awaitとresolves/rejectsマッチャーを使って非同期コードをテストする方法
開始済み 完了済み
12. 無料: フェイクタイマーとフェイクシステム時間
タイマーモック(jest.useFakeTimersまたはvi.useFakeTimers)を使って、setTimeout、setInterval、その他のタイマー関数を含む時間依存のコードを、実際の時間を待つことなくテストする方法を学びます
開始済み 完了済み
13. 無料: スナップショットとインラインスナップショット
JestとVitestのテストでスナップショットとインラインスナップショットを使用する方法
開始済み 完了済み
テストファイル構造
14. 無料: beforeEach/afterEachを使ったセットアップとティアダウン
すべてのテストの前または各テストの前、および各テストの後またはすべてのテストの後にコードを実行する方法。これはテストのセットアップ(またはクリーンアップ)に使用できます
開始済み 完了済み
15. 無料: each()を使ったテストデータのループ処理
each()を使って、異なるテストデータで同じテストを実行する方法
開始済み 完了済み
16. 無料: Skip、Todo、Only
.skip()、.todo()、.only()を使って、どのテストを実行するかを制御する方法を学びます
開始済み 完了済み
スパイとモック
17. 無料: mock()を使ったインポートと依存関係のモック
jest.mock()またはvi.mock()を使って、テストでモジュール全体、ファイルインポート、または外部依存関係をモックする方法
開始済み 完了済み
18. 無料: 関数モック(jest.fn/vi.fn)
モック関数を作成し、いつ呼び出されたかを追跡する方法
開始済み 完了済み
19. 無料: jest.spyOn()を使った関数のスパイ
jest.spyOn()を使って、既存の関数の実装を置き換えることなく、その呼び出しを監視する方法
開始済み 完了済み