開発者ドキュメント

Jestを使用したテストの概要

Jest は、構成をほとんどまたはまったく必要としないJavaScriptテストフレームワークです。 これがあなたを立ち上げて実行するための簡単な投稿です。

ジェストの設定

create-react-app を使用していますか? その場合、Jestはすでにインストールされているため、この部分はスキップできます。 ありがとう、垂直統合!

それはかなり簡単です。 Yarn(またはNPM)を介してインストールします。

yarn add --dev jest

そして、package.jsonにそのためのスクリプトを追加します。

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

テストでBabelを使用する場合は、babel-jestをインストールするだけです。

yarn add --dev babel-jest

テストファイルの作成

Jestは、.test.jsまたは.spec.jsで終わるファイルをテストファイルとして扱います。 したがって、divide.jsというファイルがある場合は、同じディレクトリの横にdivide.test.jsを置くと、Jestが実行時にそれを取得します。

また、テストを個別に保持する場合、Jestは__TESTS__フォルダーにあるファイルをテストファイルと見なします。

ライティングテスト

Jestは多数のグローバルをテストファイルに挿入するため、テストしたいもの以外にインポートするものはありません。 したがって、次のようなdivide.jsがある場合:

export default function divide(dividend, divisor) {
  if (divisor === 0) {
    throw new Error('Division by zero.');
  }
  return dividend / divisor;
}

divide.test.jsは次のようになります。

import divide from './divide';

// Describe the test and wrap it in a function.
it('divides down to the nearest integer.', () => {
  const result = divide(5, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 2.5.
  expect(result).toBe(2.5);
});

そこから、スクリプトを実行するだけです。

yarn run test

そして、Jestがテストを実行します。

カバレッジ

Jestの最も優れている点の1つは、コードカバレッジを簡単に取得できることです。 coverageフラグを渡すだけで、残りはJestが処理します。 したがって、前のセクションの例では、コマンドを次のように変更するだけです。

yarn run test -- --coverage

そしてそれはあなたにカバレッジを与えるでしょう:

👑これは単なる紹介です。 ジェストにはまだまだたくさんのことがあります。

モバイルバージョンを終了