22.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 を参考にしてください。

追加設定

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`](https://babeljs.io/docs/usage/babelrc/) ファイルを追加することを忘れないでください。 たとえば、ES6 と [ React.js](https://facebook.github.io/react/) を使用する場合は、 [ `babel-preset-env`](https://babeljs.io/docs/plugins/preset-env/) と [ `babel-preset-react`](https://babeljs.io/docs/plugins/preset-react/) をプリセットします。

```json
{
  "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パッケージをインストールして下さい。

You may also want to install the @types/jest module for the version of Jest you're using. This will help provide full typing when writing your tests with TypeScript.

For @types/* modules it's recommended to try to match the version of the associated module. For example, if you are using 26.4.0 of jest then using 26.4.x of @types/jest is ideal. In general, try to match the major (26) and minor (4) version as closely as possible.

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