0Pricing
TypeScript Academy · レッスン

Vitest/JestのTS向け設定

TypeScriptプロジェクトにVitestまたはJestを導入・設定し、小さなテストを書いて実行します

「Vitest/JestのTS向け設定」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：TypeScript用にVitestまたはJestを設定します。依存関係をインストールし、設定を追加し、小さなテストを1つ書いて実行します。

Vitestのインストール

VitestはViteネイティブです。起動が速く、ESMを優先し、優れた開発体験を提供します。グローバル変数のために@types/nodeと一緒にインストールします。

npm install --save-dev vitest @vitest/ui @types/node

Vitestの例

vitest.config.tsを追加して小さなテストを書き、npx vitestまたはnpm testスクリプトで実行します。

// vitest.config.ts
import { defineConfig } from "vitest/config";
export default defineConfig({
  test: { globals: true }
});

// src/sum.ts
export const sum = (a: number, b: number) => a + b;

// src/sum.test.ts
import { sum } from "./sum";
import { describe, expect, it } from "vitest";

describe("sum", () => {
  it("adds numbers", () => {
    expect(sum(2, 3)).toBe(5);
  });
});

Jestのインストール

JestでTSを使うにはトランスフォーマーが必要です。ts-jestを使うと、テストをその場でコンパイルできます。

npm install --save-dev jest ts-jest @types/jest @types/node

Jestの例

preset: "ts-jest"を設定します。Jestはビルド手順なしで.tsテストを実行します。

// jest.config.js
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

// src/sum.test.ts
import { sum } from "./sum";

test("adds numbers", () => {
  expect(sum(2, 3)).toBe(5);
});

スクリプト

スムーズなワークフローのためにスクリプトを追加します。開発中はウォッチモードを使うと、変更をすぐに確認できます。

// package.json (scripts)
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:jest": "jest"
  }
}

問題

クイックチェック：Jest + TSの構成で、ts-jestは何をするでしょうか。

まとめ

まとめ：Vitest（Viteネイティブ）とJest（広く使われている）は、どちらもTSと相性よく動作します。一度設定すれば、ウォッチモードやCIでテストを実行できます。

よくある質問

「Vitest/JestのTS向け設定」レッスンは無料ですか？

はい。「Vitest/JestのTS向け設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「Vitest/JestのTS向け設定」で何を学びますか？

TypeScriptプロジェクトにVitestまたはJestを導入・設定し、小さなテストを書いて実行します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「Vitest/JestのTS向け設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vitest/JestのTS向け設定
  2. テストとモックの型付け、expectTypeOf
  3. E2Eの型付け入門（Playwright/Cypress）
← TypeScript Academyに戻る