Jest

Translate this Doc

Getting Started

npm を使用して Jest をインストール

npm install --save-dev jest

yarn を使用する場合

yarn add --dev jest

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"
  }
}

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

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

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

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

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

Jest は CLI(グローバルに利用可能な場合、例えば npm install -g jest )から直接実行できます。

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

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

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

追加設定 #

Babel を使用する #

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

npm install --save-dev babel-jest regenerator-runtime

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

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

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

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

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

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

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

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

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

Webpack を使用する #

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

TypeScript を使用する #

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

npm install --save-dev ts-jest @types/jest

そしてpackage.jsonの jestセクションを以下のように変更して下さい。

{
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx"
    ]
  }
}
次 →