Jestについて

Jestとは

Facebook製のJavaScriptテストプラットフォームです。

特徴

・ブラウザの起動が無いので軽快に動く。実ブラウザ上ではなく、JSDOMのエミュレーション環境でテストが実行される。※エミュレーション環境とは、OSなどと同じようにそのまま動作する、別環境

・テスト実行進捗がプログレスバーで表示され、Failしたテストを閲覧しやすい
・並列実行が可能であり、ファイルを変更するたびに自動的にテストを実行するオプションがある。

・設定が簡単で、アサーションライブラリとテストランナーが含まれているため、別途ライブラリをインストールする必要がない。

※アサーションは、真であることが期待される条件をチェックするための手法です。
※アサーションライブラリは、テストコードの中でアサーションを記述し、テストランナーに渡すことができます。
※テストランナーは、コードが期待通りに振る舞うかどうかをテストし、パスしたかどうかを報告します。

インストール

npm

$ npm i --save-dev jest

// tsの場合
$ npm i --save-dev jest ts-jest @types/jest

初期化

jest.config.jsが生成され、jestに対してts-jestをpresetとして使用するように設定されます。

npm

$ npx ts-jest config:init

jset.config.js

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

なお、package.jsonにnpm testを追加するとコマンドでテストが実行できるようになります。

package.json

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

設定ファイル

jest.config.jsをプロジェクト直下に作成(package.jsonでも可)

jest.config.js

module.exports = {
  "roots": [
    "./src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
  ],
  moduleNameMapper: {
    '\\.(css)$': '<rootDir>/src/__tests__/styleMock.js',
  },
}

transform

テストファイルを実行する前に、ts-jestを使ってTypeScriptをJavaScriptに変換します
。^.+\\.tsx?$はTypeScriptの拡張子で、testRegexオプションで使用されます。

^ : 行の先頭
.+ : 1つ以上の任意の文字列
\\. : .
$ : 行の末尾

つまり、このパターンは .ts または .tsx 拡張子を持つ、ファイル名の先頭から末尾までの文字列を表します。Jestは、このパターンに一致するファイルをテストファイルとして認識し、テスト実行の対象にします。

testRegex

Jestがテストファイルを検索する正規表現です。この場合、/__tests__/ディレクトリ内の.tsxまたは.ts、testまたはspecという単語を含む.tsxあるいは.tsファイルが対象となります。

moduleFileExtensions

Jestが解釈するファイルの拡張子を指定します。

moduleNameMapper

Jestがモックするモジュールの指定です。この場合、CSSファイルを指定しています。この設定により、CSSファイルがモックされ、テスト実行時にエラーが発生するのを防ぎます。

※オブジェクトや関数を置き換え、テスト時に必要な振る舞いを再現するためのオブジェクト。なお、モックデータは、実際のデータに似せた形式で作成されたデータのことで、テスト時に必要なデータを用意できる。

テストコードの実装

公式を元に...
https://jestjs.io/ja/docs/getting-started

sum.js

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

/__tests__/ 内にテストファイルを作成。

sum.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

テストを実行

npm

$ npm test

最後に

モック関数やMatcherについては使用しながら学びつつ、後日記事にまとめようと思います。