23.x

Edit

Getting Started

次のコマンドで yarn を使用して Jest をインストールします。

yarn add --dev jest

npm の場合は次のように書きます。

npm install --save-dev jest

注意: Jest のドキュメントでは yarn コマンドを使用していますが、 npm を使用することもできます。 yarn コマンドと npm コマンドの違いについて知りたい場合は、 yarnのドキュメントを参照してください。

2つの数値を加算する関数のテストを書くことから始めてみましょう。 まず、 sum.js ファイルを作成します。

function sum(a, b) {
  return a + b;
}
module.exports = sum;

次に、 sum.test.js という名前のファイルを作成します。 これには実際のテストが含まれます:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

package.json に以下を追加します。

{
  "scripts": {
    "test": "jest"
  }
}

最後に、yarn test を実行すると、Jest は以下のメッセージを出力します。

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

あなたは Jest を使用して、最初のテストを書き、うまくいきました!

このテストは expect と、 toBe を使用し、2 つの値が同じかテストしました。 他の Jest でテスト可能なものについては、Using Matcher を参照してください。

コマンドラインからの実行

Jest は、CLI から様々な便利なオプションを付けて、直接実行できます。（実行するためには、例えば yarn global add jestまたはnpm install jest --global でインストールし、PATH でグローバルに利用可能になっている必要があります。）

ここでは my-test を Jest で実行し、実行後に OS の通知を表示する方法を示します。そのとき構成ファイルとして config.json を使用します。

jest my-test --notify --config=config.json

コマンドラインから Jest を実行する方法の詳細については、Jest CLI Options を参考にしてください。

追加設定

基本の設定ファイルを生成する

次のコマンドを実行すると、Jest はあなたのプロジェクトの構成に基づいたいくつかの質問をし、その回答から短いコメント付きの基本の設定ファイルを生成します。

jest --init

Babel を使用する

Babel を使用するには、babel-jest および regenerator-runtime パッケージをインストールします。

yarn add --dev babel-jest babel-core regenerator-runtime

注意：Babelのバージョン７を使用しているなら、babel-jest、babel-core@^7.0.0-bridge.0と@babel/coreを以下のコマンドでインストールする必要があります：

yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

node_modules をトランスパイルするには、 babel.config.js を使用する必要があります。 詳細は https://babeljs.io/docs/en/next/config-files を参照してください。

Jestリポジトリの例も参照することができます: https://github.com/facebook/jest/tree/54f4d4ebd3d1a11d65962169f493ce41efdd784f/examples/babel-7

注: npm v3,4 か yarn を使用している場合は、regenerator-runtime を明示的にインストールする必要ありません。

プロジェクトのルートフォルダーに .babelrc ファイルを追加することを忘れないでください。 たとえば、ES6 と React.js を使用する場合は、 babel-preset-env と babel-preset-react をプリセットします。

{
  "presets": ["env", "react"]
}

ES6 と React の構文が使用できるように設定されました。

注意: もし Babel の env オプションでより複雑な Babel の設定を行っている場合は、Jest は自動的に NODE_ENV を test に設定することに注意してください。 Jest では Babel が デフォルトで行うような、NODE_ENV が設定されていない場合に, development セクションを利用するといった事をしません。

注意: { "modules": false } オプションで ES6モジュールのトランスパイルを無効にしている場合、テスト環境では必ず有効にする必要があります。

{
  "presets": [["env", {"modules": false}], "react"],
  "env": {
    "test": {
      "presets": [["env"], "react"]
    }
  }
}

注意:babel-jest はJestのインストール時に自動的にインストールされ、Babelの設定がプロジェクト内にあれば自動的にファイルを変換します。 これを避けるには、 transform設定を明示的にリセットして下さい。

// package.json
{
  "jest": {
    "transform": {}
  }
}

Webpack を使用する

Jestは webpackでアセットやスタイル、コンパイル作業を管理するプロジェクトで使用できます。 webpack は他のツールよりもユニークで挑戦的な機能を提供しています。 具体的な使い方は webpack guide を参照してください。

Parcel を使用する

Jestは parcel-bundleで webpack と同様にアセットやスタイル、コンパイル作業を管理するプロジェクトで使用できます。 Parcelは設定が不要です。 使用するには、公式の ドキュメント を参照してください。

TypeScript を使用する

テスト内でTypeScriptを使用するには、 ts-jestパッケージをインストールして下さい。

使用している Jest のバージョンの @types/jest モジュールをインストールすることもできます。 このモジュールはTypeScriptでテストを書くときに完全な型付けを与えるのに役立ちます

@types/* モジュールについては、関連するモジュールのバージョンを一致させることをお勧めします。 例えば、 26.4.0 の jest を使用している場合は、 26.4.x の @types/jest を使用するのが理想的です。 一般に、メジャー(26)とマイナー(4)までのバージョンをできるだけ近いバージョンに合わせるようにしてください。

yarn add --dev @types/jest
Using Matchers →