[2022/03/17更新] インテリセンス設定時のインストールコマンドが間違っていたので修正。

この記事では、JavaScriptのテストフレームワークであるJestのインストール方法、インテリセンスなどの設定方法について説明します。

この記事の内容です。

• 対象読者
• 環境
• 前提条件
• Jestのインストール
• 便利に使うための設定
  • インテリセンス
  • import時のエラー解消
• 余談
  • 何故Jestを選んだのか？
  • なぜnpmとyarnを使い分けているのか？
• 参考にしたページ

対象読者

• Jestの利用環境を構築したい方

環境

• Windows 10 (Ver. 21H2, Build. 19044.1526)
• WSL 2 (Ubuntu 20.04 LTS)
• Visual Studio Code

前提条件

• npmおよびyarnインストール済

Jestのインストール

npm install --save-dev jest

便利に使うための設定

インテリセンス

まずは、以下のコマンドでJestの型定義をインストールします。

npm install --save-dev @types/jest

次に、プロジェクトのルートディレクトリに以下のファイルを jsconfig.json という名前で作成します。

{
  "typeAcquisition": {
    "include": [
      "jest"
    ]
  }
}

import時のエラー解消

このままではJestのテストファイル内でテスト対象をimportをした時に参照できずエラーが発生するので、対応するためにbabel環境を構築する必要があります。
最初に、以下のコマンドでbabelをインストールします。

yarn add --dev babel-jest @babel/core @babel/preset-env

次に、プロジェクトのルートディレクトリに以下のファイルを babel.config.cjs という名前で作成します。

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
};

余談

何故Jestを選んだのか？

ざっくり、以下の3つの理由からです。

1. npmでのダウンロード数が圧倒的に多い(利用者数が多い) ため、何かあっても情報を得やすい。
2. 環境構築が簡単。
3. 様々なライブラリやフレームワークに対応している。

なぜnpmとyarnを使い分けているのか？

正直なところ、昨今のnpmの改良具合を見ているとパフォーマンスなどの差はどんどん縮まってきているのでNode.js公式パッケージマネージャーであるnpmのみを使っておいた方が安心安全だと思います。
が、今回の場合はbabel周りがyarnでしかインストールできなかったため、渋々使っています。
本当はnpmだけで統一したかった…

参考にしたページ

Jestの設定
npm trends (chai vs cypress vs jasmine vs jest vs mocha)