TypeScriptとJest/Vitestのtsconfig設定を徹底解説！初心者のためのテスト環境構築ガイド

TypeScriptとJest/Vitestでのtsconfig設定の調整方法

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでプログラムを書いているのですが、テストコードを書くときに設定がうまくいかなくて困っています。tsconfig.jsonというファイルをどう調整すればいいのでしょうか？」

先生

「TypeScriptにはプログラムを動かすためのルールを決める設定ファイルがありますが、テストを行うための道具であるJestやVitestを使うときには、その設定を少し工夫する必要があるんです。」

生徒

「JestやVitestによって設定の書き方は変わるんですか？」

先生

「そうですね。それぞれの道具が得意なことが違うので、設定のポイントも異なります。まずは基本的な仕組みから一緒に見ていきましょう！」

1. TypeScriptと設定ファイルの役割を知ろう

TypeScriptは、私たちが書いたプログラムをコンピュータが理解しやすい形に変換してくれる言語です。この変換作業のことをコンパイルと呼びます。そして、そのコンパイルのルールを細かく決めているのが、tsconfig.jsonという名前の設定ファイルです。

パソコンを初めて触る方にとって、設定ファイルと聞くと難しく感じるかもしれません。しかし、これは料理のレシピのようなものです。「この材料を使って、こういう手順で作ってください」という指示をコンピュータに出しているだけなのです。特にテストコードを書くときは、本番用のプログラムとは少し違うルールが必要になるため、この設定ファイルを調整する技術が非常に重要になります。

2. テストツールであるJestとVitestの違い

プログラムが正しく動くかを確認するための作業をテストと呼びます。このテストを自動で行ってくれる便利な道具がいくつかありますが、有名なのがJest（ジェスト）とVitest（バイテスト）です。

Jestは昔から多くの人に使われている定番の道具です。一方でVitestは、最近登場した非常に動きが速い新しい道具です。どちらを使うにしても、TypeScriptで書かれたテストコードを動かすためには、設定ファイルで「テストのコードもちゃんと読み込んでね」と伝える必要があります。この違いを理解することが、エラーを解決する第一歩となります。

3. 共通で重要な設定項目を理解する

まずは、どんなテストツールを使う場合でも、tsconfig.jsonで意識しておくべき基本的な項目を説明します。特に大事なのが、どのファイルを処理の対象にするかという設定です。

例えば、includeという項目は、コンパイラに対して「このフォルダの中にあるファイルを全部見てね」と指示する場所です。逆にexcludeは「このフォルダは無視していいよ」と伝える場所です。テストコード用のファイルが無視される設定になっていると、どれだけ頑張ってコードを書いてもエラーが出てしまいます。


{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*", "tests/**/*"]
}

このコードの中にあるtargetは、プログラムをどの時代の書き方に合わせるかを決めるものです。strictをtrueにすると、より厳しく間違いをチェックしてくれるようになります。

4. Jestを使うための専用設定のコツ

Jestは、デフォルトの状態ではTypeScriptを直接理解することができません。そのため、変換のためのプラグインが必要になります。また、Jest専用の型定義を読み込ませる必要があります。型定義とは、プログラムの中で使う言葉の辞書のようなものです。

設定ファイルの中にあるtypesという項目に、"jest"を追加することで、「これはJestの命令なんだな」とコンピュータが理解できるようになります。これを忘れると、テストコードの中で使う特別な言葉に赤い波線が出て、エラーになってしまいます。


{
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

このように設定することで、テスト専用の命令をスムーズに使えるようになります。もし複数の設定を使い分けたい場合は、テスト専用の設定ファイルを作るという高度な技もありますが、まずはこの基本をしっかり押さえましょう。

5. Vitestでの設定調整とメリット

Vitestは非常に賢い道具で、多くの場合、通常のプログラム用設定をそのまま流用できます。しかし、より快適に使うためには、やはり少しの調整が役立ちます。Vitestはモダンな作りになっているため、moduleResolutionという項目を"bundler"や"node"に設定することが推奨されます。

これにより、ファイルの読み込みがより正確かつ高速になります。また、Vitestではブラウザのような環境をシミュレーションすることもあるため、そのための設定を追加することもあります。初心者の方は、まずエラーが出たときに、どのファイルが読み込まれていないかを確認する癖をつけると良いでしょう。


{
  "compilerOptions": {
    "moduleResolution": "node",
    "types": ["vitest/globals"]
  }
}

このように、typesに"vitest/globals"を加えると、どこでもVitestの機能が使えるようになり、非常に便利です。

6. 型エラーを防ぐための基本的な考え方

初心者が一番最初につまずくのは、画面に表示されるたくさんの英語のエラーメッセージです。これは「型が違います」や「その名前は見つかりません」といった内容がほとんどです。TypeScriptの設定ファイルは、こうしたエラーを事前に防ぐための防護壁のような役割を果たしています。

例えば、noImplicitAnyという設定を有効にすると、中身がよくわからないデータがあるときに教えてくれます。これは、テストコードを書くときにも非常に役立ちます。自分が何をテストしているのかを明確にするために、設定を厳しめにしておくことは、長期的に見れば自分の助けになります。

7. 複数の設定ファイルを使い分ける方法

中規模以上のプログラムになると、本番用の設定とテスト用の設定を別々に管理したくなることがあります。これを設定の継承と呼びます。まず土台となる基本の設定ファイルを作り、それを引き継ぐ形でテスト用のファイルを作る方法です。

これにより、本番のコードに影響を与えることなく、テストのときだけ特別なルールを適用させることができます。例えば、テストコードだけで使うライブラリがある場合、本番の設定にそれを入れるのは無駄ですよね。そんなときに、この使い分けが効果を発揮します。


{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist/test",
    "noEmit": false
  },
  "include": ["tests/**/*.ts"]
}

このextendsというのが「前の設定を引き継ぐよ」という合言葉です。これを使うことで、設定ファイルの管理がとても楽になります。

8. 実際にテストが動くか確認する手順

設定が終わったら、いよいよテストを実行してみましょう。コマンドプロンプトやターミナルと呼ばれる黒い画面に、特定の命令を打ち込みます。もし設定が間違っていれば、ここでたくさんのエラーが出てきます。

エラーが出たときは、焦らずに内容を読みましょう。多くの場合、「ファイルが見つからない」という内容であれば、includeの設定を見直すべきですし、「命令が理解できない」ということであれば、typesの設定が足りない可能性が高いです。一歩ずつ設定を直していくことで、パソコンの仕組みにも詳しくなれます。


> npm test

PASS  tests/example.test.ts
  テストの成功
    ✓ 正しく計算ができること (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.234 s

このような表示が出れば、あなたの設定は完璧です！おめでとうございます。

9. コンパイルエラーとテストエラーの見分け方

初心者の方が混同しやすいのが、TypeScript自体のエラー（コンパイルエラー）と、テストが失敗したときのエラーです。前者は「文法が間違っていて、動かす前の段階でダメですよ」という警告です。後者は「プログラムは動いたけれど、結果が予想と違いましたよ」という報告です。

tsconfig.jsonの調整で解決できるのは、主に前者のコンパイルエラーです。もし、テストコードの中に赤い波線が出ていて、テストが始まらない場合は、設定ファイルの設定が不十分である可能性を疑ってください。逆に、赤い波線がないのにテストが落ちる場合は、プログラムの書き方そのものを確認する必要があります。

10. 設定を調整する際に気をつけるべきこと

最後に、設定ファイルをいじるときのアドバイスです。一度にたくさんの場所を変えないようにしましょう。どこを変えて動かなくなったのかが分からなくなってしまうからです。一つ変更したら一度テストを動かしてみる、という地道な作業が一番の近道です。

また、インターネットで調べた古い情報をそのままコピーして貼り付けるのも危険です。TypeScriptや各ツールは日々進化しているため、最新の公式ドキュメントを確認する習慣をつけると良いでしょう。最初は難しく感じるかもしれませんが、自分で設定を調整してテストが通ったときの喜びは格別です。ぜひ、自分なりの最適な設定を見つけてみてください。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。