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のバージョン7を使用しているなら、
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 using26.4.0
ofjest
then using26.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