Help us understand the problem. What is going on with this article?

TypeScript のテストを Jest (ts-jest) でやってみる

公式では babel でバベってやるやり方がメインで紹介されていますが
(https://jestjs.io/docs/ja/getting-started#typescript-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)
ちょっと違うやり方でやります。

TypeScript support in Babel is just transpilation, Jest will not type-check your tests as they are ran. If you want that, you can use ts-jest.

と言われてるように、バベると型検査されないので
型検査が必要な場合には ts-jest を使うのがいいですね。

セットアップ

パッケージを入れます:

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

Jest の設定は package.json にも書いてみます:

package.json
{
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/tests/**/*.test.ts"
    ]
  }
}

testMatch がテスト対象ですね。
${projectRoot}/tests/ 以下の
*.test.ts に書かれたテストスペックが実行対象になります。

transformts-jest で TypeScript をよしなに実行してもらうのに必要です。
SyntaxError: Unexpected identifier とか出た場合は変換できてないので指定が漏れてないかチェックします。

あとは globals > ts-jest > tsConfigtsconfig.json を読むように指定します。これで tsconfig の構成でテストできるようになります。


👉 https://jestjs.io/docs/ja/configuration
Jest の config は
ほかに jest.config.js として export する書き方や、
JSONとして jest.config.json のようにして実行時にオプションで指定もできます。
その場合は jest 以下を記述するようにします。

import のエイリアスを指定

import するときに相対パスだとちょっと長ったらしいので
import some from "#/some/module"; とかで
ソースディレクトリからモジュールを読み込めるようにしておくと若干嬉しいです:

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "#/*": ["*"]
    },   
  }
}

Jest の設定にも追記します:

package.json
{
  "jest": {
    "moduleNameMapper": {
      "^#/(.+)": "<rootDir>/src/$1"
    }
  }
}

これで #/some/module${projectRoot}/src/some/module にマップされます。

テストを書く

テストの書き方自体はいつもの感じで書けます。
無駄に型指定しかするとこんな感じです:

tests/greet.test.ts
import greet from "#/greet";

describe('greet', (): void => {
    test('should say hello to Tom.', (): void => {
        const response: string = greet('Tom');
        expect(response).toBe('Hello, Tom!');
    });
})
src/greet.ts
export default (name: string): string => `Hello, ${name}!`;

テストを書けました。
テストの実行に追加で指定は必要ありません (他にオプションが必要なければ)。
npm test で実行できるようにしましょう。:

package.json
{
  "scripts": {
    "test": "jest"
  }
}

console
> npm test

PASS  tests/greet.test.ts
  greet
    ✓ should say hello to Tom. (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.829s, estimated 3s
Ran all test suites.

これで OK です。

あとは https://jestjs.io/docs/ja/getting-started にあるドキュメント に沿って、効率的にテストを書いていくとよいですね!

mangano-ito
Web + アプリ (Android) エンジニアです。
https://mangano-ito.hatenablog.com/
hatena-corp
「知る」「つながる」「表現する」で新しい体験を提供し、人の生活を豊かにする
https://hatenacorp.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした