Jestのテスト環境をTypeScriptで動かす

June 22, 2019

Jestのテスト環境をTypeScriptで動かしたかったのでメモ。テストコードでも型安全に書きたいです。

インストール

必要なモジュールをインストールします。

npm i -D jest ts-jest @types/jest typescript

jestの設定ファイル

jest.config.jsをプロジェクトに追加します。.spec.tsがテスト対象になるようにします。

module.exports = {
  moduleFileExtensions: ["ts", "tsx", "js"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  globals: {
    "ts-jest": {
      tsConfigFile: "tsconfig.json"
    }
  },
  testMatch: ["**/*.spec.+(ts|tsx|js)"]
};

テストコード

test.spec.tsを下記のようにします。

describe("test", () => {
  it("1+1 should be 2", () => {
    expect(1 + 1).toEqual(2);
  });
});

テスト

今回は./test/配下にテストコードを置きました。

実行スクリプトは下記の通りです。--watchAllを入れることでテストコードを監視して再実行してくれます。

jest --watchAll ./test/

実行結果

 PASS  test/test.spec.ts
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.795s
Ran all test suites matching /.\/test\//i.

Watch Usage: Press w to show more.

TypeScriptのコンパイルエラー

プロジェクトにspec.tsのテストコードを追加すると、こんな感じのエラーが出ます。これはJestのモジュールをimportすることなくtsファイルに書けてしまうのが原因のようです。

TS2304: Cannot find name 'expect'.

なのでtsconfig.jsonに下記を追加してコンパイル対象から除外してしまいます。これで通常のプロジェクトのコンパイルは通るようになります。

{
  "exclude": ["node_modules", "**/*.spec.ts"]
}

参考

WP-Kyoto