22.x

Edit

Getting Started

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

yarn add --dev jest

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

npm install --save-dev jest

Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a sum.js file:

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

Then, create a file named sum.test.js. This will contain our actual test:

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 を参照してください。

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

You can run Jest directly from the CLI (if it's globally available in your PATH, e.g. by yarn global add jest) with variety of useful options.

ここでは 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

Note: If you are using Babel version 7 then you need to install babel-jest, babel-core@^7.0.0-bridge.0 and @babel/core with the following command:

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


You will need to use `babel.config.js` in order to transpile `node_modules`. See https://babeljs.io/docs/en/next/config-files for more information.

You can also see the example in the Jest repository: https://github.com/facebook/jest/tree/54f4d4ebd3d1a11d65962169f493ce41efdd784f/examples/babel-7

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

プロジェクトのルートフォルダーに [ `.babelrc`](https://babeljs.io/docs/usage/babelrc/) ファイルを追加することを忘れないでください。 For example, if you are using ES6 and [React.js](https://facebook.github.io/react/) with the [`babel-preset-env`](https://babeljs.io/docs/plugins/preset-env/) and [`babel-preset-react`](https://babeljs.io/docs/plugins/preset-react/) presets:

```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 を参照してください。

TypeScript を使用する

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

Using Matchers →